PX-REM Dönüştürücü
Px'i rem'e çevirmek için piksel değerini kök yazı tipi boyutuna bölün: rem = px / kök. Tarayıcının varsayılan kök boyutu 16px iken 24px / 16 = 1.5rem olur. Aşağıdaki temeli değiştirin – Ant Design için 14px, %62,5 numarası için 10px – rem ve em değerleri onu izler; punto değeri ise piksellere bağlıdır, çünkü 1px her zaman 0,75pt eder.
em alanı, öğenin yukarıdaki temel yazı tipi boyutunu miras aldığını varsayar. CSS'te em, öğenin kendi yazı tipi boyutuna göre hesaplanır; font-size özelliğinin kendisinde kullanıldığındaysa üst öğenin boyutuna göre.
Toplu dönüştürme: CSS ya da px değerlerinden bir liste yapıştırın
Her px değeri, yukarıdaki temel yazı tipi boyutuna göre rem olarak yeniden yazılır.
Px'i rem'e nasıl çeviririm?
Formül rem = px / kök yazı tipi boyutu, tersi ise px = rem x kök yazı tipi boyutudur. Öğe ne kadar derinde olursa olsun yalnızca kök html öğesinin yazı tipi boyutu sayılır; rem aritmetiğini öngörülebilir kılan da budur. Varsayılan 16px kökte: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem ve 40px = 2.5rem.
Sonucu yuvarlamayın. 16px kökte 15px tam olarak 0.9375rem'dir; 0.94rem'e yuvarlamak işlenen boyutu 15.04px'e taşır ve ızgara hizasını bozar. Tarayıcılar alt piksel uzunlukları hesaplar ve boyama sırasında bunları cihazın piksel ızgarasına oturtur; bu yüzden dönüştürücünün verdiği tam değeri kopyalayın. Dönüştürücü en fazla altı ondalık basamak yazar: 16px ve 10px gibi tam bölen köklerde bu değer kesindir, 14px gibi tam bölmeyen bir kökte ise rem'in milyonda biri kadar hassastır.
16px, 14px ve 10px kök boyutları için px-rem tablosu
Aynı piksel değeri, projenizin belirlediği köke göre üç farklı rem değerine dönüşür; bu tablo üçünü birden, ayrıca punto karşılığını da verir (CSS 1px'i 1/96 inç, 1pt'yi 1/72 inç olarak tanımlar, yani 1px = 0.75pt). 16px ve 10px sütunları tamdır. 14px kökte bölme çoğunlukla tam çıkmadığı için o değerler dört ondalık basamağa yuvarlanmış ve yaklaşıklık işaretiyle gösterilmiştir; yukarıdaki dönüştürücü daha fazla basamak verir.
| Piksel | rem (kök 16 px) | rem (kök 14 px) | rem (kök 10 px) | Punto |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem, em: hangi birimi kullanmalıyım?
Pratik ayrım: okuyucunun metin boyutunu izlemesi gereken her şey için rem, öğenin kendi yazı tipi boyutunu izlemesi gereken değerler için em, yalnızca fiziksel olarak sabit kalması gereken uzunluklar için px. Örnek sütunu 16px kök ve 16px üst öğe varsayar.
| Birim | Neye göre | 20px şuna eşit | En uygun kullanım | Okuyucunun metin boyutunu izler |
|---|---|---|---|---|
| px | Hiçbir şeye – mutlak birim (1px = 1/96 inç) | 20px | Saç teli kalınlığındaki kenarlıklar, odak halkaları, tam simge boyutları | Hayır |
| rem | Kök html öğesinin yazı tipi boyutu | 1.25rem | Yazı boyutları, boşluklar, kırılma noktaları, bütün tipografi ölçekleri | Evet |
| em | Öğenin kendi yazı tipi boyutu (font-size verilirken üst öğenin boyutu) | 1.25em | Sardığı etiketle birlikte büyümesi gereken iç boşluk | Evet |
| % | Üst öğenin o özellik için aldığı değer | 125% | Akışkan genişlikler ve eski font-size zincirleri | Evet (font-size) |
İç boşluk, dış boşluk ve kenarlıklarda px mi rem mi?
Metin büyüdüğünde nefes alması gereken iç ve dış boşluklarda rem kullanın: düğme iç boşluğu, kart aralıkları, bölüm boşlukları, ızgara aralıkları. Saç teli inceliğindeki çizgilerde px kalsın. 1px'lik bir kenarlık, cihazdan bağımsız tek ve net bir pikseldir; aynı kenarlık 0.0625rem olarak yazıldığında bazı yakınlaştırma düzeylerinde sıfıra yuvarlanabilir ya da bulanıklaşabilir, aynısı 2px'lik odak halkaları ve ayırıcılar için de geçerlidir. Yukarıdaki toplu dönüştürme bu yüzden 1px ve 2px değerlerini varsayılan olarak olduğu gibi bırakıp geri kalan her şeyi yeniden yazar.
Medya sorguları, rem'in kendini ödettiği ikinci yerdir. Bir medya sorgusunun içinde rem, sizin html kuralınıza değil tarayıcının başlangıç yazı tipi boyutuna göre çözümlenir: 48rem'lik bir kırılma noktası varsayılan ayarlarda 768px'dir ve metin boyutunu büyüten okuyucuda büyür. Px ile yazılmış kırılma noktaları ise hiç kımıldamaz.
Figma, VS Code ve Tailwind'de px'i rem'e nasıl çeviririm?
Figma px ile ölçer ama Dev Mode rem üretebilir: Inspect ayarlarını açın, «Set unit scale» seçeneğini seçin ve kök yazı tipi boyutunuzu girin (varsayılan olarak 1rem = 16px). cssrem gibi VS Code eklentileri otomatik tamamlama üzerinden dönüştürür ve kökü bir ayar olarak sunar – cssrem.rootFontSize, varsayılanı 16 – bu yüzden 14px'lik bir projede çıktıya güvenmeden önce uyduğunu kontrol edin. Dosyanın tamamı için, önce temeli ayarlayıp yukarıdaki toplu dönüştürme kutusuna yapıştırın. Tailwind'in varsayılan ölçeği 16px kökle zaten rem tabanlıdır: bir boşluk birimi 0.25rem (4px) olduğundan 16px 4, 24px 6 ve 40px 10 eder.
Kaynaklar
PX-REM Dönüştürücü Hakkında
Bu px-rem dönüştürücüsü tek bir soruyu yanıtlar: tasarım dosyanızdaki bir piksel değeri, projenizin gerçekten kullandığı kök yazı tipi boyutunda CSS'te neye dönüşür? Temel kaydırıcısını hareket ettirin – 16px tarayıcı varsayılanı, 14px Ant Design'ınki, 10px eski %62,5 numarası – ve sayfadaki her rem ve em değeri ona göre yeniden hesaplansın; böylece bir sayının hangi temele göre yazıldığını hatırlamanız hiç gerekmez.
Gireceğiniz temel, stil dosyanızın html öğesine verdiği değerdir – body'ye verdiği değil ve biçimlendirdiğiniz bileşenin yazı tipi boyutu da değil. Böyle bir kural yoksa tarayıcı varsayılanı geçerlidir: okuyucu yükseltmediyse 16px. DevTools'ta html düğümünü seçip hesaplanan font-size değerini okuyun; bütün stil dosyasının böleni o sayıdır. Dört çatı düğmesi bu değeri Tailwind, Bootstrap, Material UI ve Ant Design için sizin yerinize doldurur.
Buradaki fark toplu kip: bir stil dosyasını, Figma'dan alınmış bir ölçü dökümünü ya da düz bir sayı listesini yapıştırın; kaç değerin değiştiğini gösteren sayaçla birlikte rem sürümünü geri alın, kopyalamaya ya da CSV olarak indirmeye hazır. Aracın altında formülün iki yönü, üç kök boyutu için 1px'ten 96px'e uzanan bir tablo ile punto karşılıkları, bir birim karşılaştırma tablosu ve ayrıntılı yanıtlanmış on soru sizi bekliyor.
Kullanım alanları
Nasıl kullanılır
Temel (kök) yazı tipi boyutunu ayarlayın: 16px tarayıcı varsayılanı, 14px Ant Design'a denk gelir, 10px ise %62,5 numarasını verir.
Piksel değerini Piksel alanına yazın. rem, em ve pt alanları siz yazdıkça güncellenir.
Ya da tersinden gidin: bir rem değeri girin ve bunun geçerli kökte kaç piksel ettiğini okuyun.
8px-96px hızlı tablosundaki herhangi bir değere dokunarak yükleyin ya da 16px, 14px ve 10px kökleri için tam tabloyu inceleyin.
Bütün bir CSS bloğunu toplu dönüştürmeye yapıştırarak tüm px değerlerini tek seferde yeniden yazın; 1px ve 2px kenarlıklar korunur.
Oluşturulan CSS bildirimini kopyalayın ya da dönüştürülmüş px/rem çiftlerini tasarım teslimi için CSV olarak indirin.
Profesyonel İpuçları
- Önce temel yazı tipi boyutunu ayarlayın: sayfadaki her rem ve em değerini o belirler – alanlar, hızlı düğmeler ve toplu dönüşüm –, dolayısıyla 14px köke geçmek hepsini bir anda yeniden yazar.
- 1px ve 2px kenarlıkları px olarak bırakın. Alt piksel kenarlıklar bazı yakınlaştırma düzeylerinde sıfıra yuvarlanabilir; toplu kip bu yüzden onları varsayılan olarak atlar.
- pt kökten bağımsızdır: temeliniz ister 16px ister 10px olsun 24px 18pt eder, bu yüzden kaydırıcıyı oynattığınızda Punto alanı yerinde kalır.
- Toplu kip, temel kaydırıcısını her oynattığınızda yeniden çalışır; böylece aynı stil sayfasını iki kez yapıştırmadan 16px ve 14px kökte görebilirsiniz.
- em'e yalnızca bir değerin kendi öğesinin yazı tipi boyutunu izlemesi gerektiğinde başvurun – örneğin etiketi saran düğme iç boşluğunda – geri kalanı rem'de tutun ki hiçbir şey katlanmasın.
Sık Sorulan Sorular
Piksel değerini kök yazı tipi boyutuna bölün: rem = px / kök. Tarayıcının varsayılan kökü 16px olduğundan 24px / 16 = 1.5rem ve 10px / 16 = 0.625rem olur. rem için öğe ne kadar derine yerleşmiş olursa olsun yalnızca kök öğenin yazı tipi boyutu önemlidir; hesabı bütün bir stil sayfasında öngörülebilir kılan tam da budur.
Varsayılan 16px kökte 1rem = 16px, 1.5rem = 24px ve 2rem = 32px olur; burada bölmek yerine çarpılır: px = rem x kök. Kök Ant Design'daki gibi 14px ise 1rem 14px'e düşer ve 1.5rem 21px olur. Kökü belirtilmeyen bir rem değeri anlamsızdır, bu yüzden temeli her zaman yanında yazın.
Px cinsinden bir yazı tipi boyutu, okuyucunun tarayıcısında seçtiği metin boyutunu yok sayar: varsayılanını 20px yapan biri yine de sizin sabitlediğiniz 14px'i görür. rem bu ayara göre ölçülür, dolayısıyla bütün boyutlar birlikte ölçeklenir. WCAG 2.2'nin 1.4.4 başarı ölçütü metnin %200 büyütmeye dayanmasını bekler ve rem tabanlı bir tipografi ölçeği bunu tek bir ek medya sorgusu olmadan sağlar.
rem her zaman kök html öğesinin yazı tipi boyutuna görelidir. em, yazıldığı öğenin yazı tipi boyutuna görelidir; tek istisna font-size özelliğinin kendisidir, orada üst öğenin yazı tipi boyutuna göre çözümlenir. İç içe yazı boyutlarının katlanarak küçülmesinin nedeni budur: 0.9em içinde 0.9em içinde 0.9em, aslının 0.729'u eder. rem hiçbir zaman katlanmaz; tipografi ölçekleri ve yerleşim boşlukları için daha güvenli varsayılan olmasının sebebi de budur.
Metin büyüdüğünde nefes alması gereken boşluklarda rem kullanın: düğme iç boşluğu, kart aralıkları, bölüm boşlukları. Saç teli inceliğindeki çizgilerde px kalsın: 1px'lik kenarlık net kalır, rem karşılığı ise bazı yakınlaştırma düzeylerinde sıfıra yuvarlanabilir ya da bulanıklaşabilir. Bu sayfadaki toplu dönüştürmenin 1px ve 2px değerlerini varsayılan olarak px'te bırakmasının nedeni tam olarak budur.
Bir çatı başka bir şeyi dayatmıyorsa 16px'te kalın, çünkü tarayıcı varsayılanıyla aynıdır. Ant Design 14px'lik bir kökle gelir. %62,5 numarası html { font-size: 62.5% } tanımlar; böylece 1rem = 10px olur ve hesap px / 10'a iner: 24px, 2.4rem eder. Okuyucunun ayarını izlemeye devam eder – 20px'lik bir varsayılanın %62,5'i 12.5px'tir – ama ardından body { font-size: 1.6rem } yazmanız gerekir, yoksa her paragraf 10px olarak görüntülenir; ayrıca 16px kök için yapılmış üçüncü taraf bileşenler fazla küçük görünür. Üç kök de yukarıdaki tabloda yer alıyor.
Değeri denetleyiciden okuyun ve kökünüze bölün: 28px'lik bir başlık 16px kökte 1.75rem, 12px'lik bir alt yazı 0.75rem eder. Dev Mode rem'i kendisi de yazabilir: dil menüsünün yanındaki Inspect ayarlarını açın, «Set unit scale» seçeneğini seçin ve kök yazı tipi boyutunuzu girin (varsayılan olarak 1rem = 16px). Dışa aktardığınız bloğun tamamını yukarıdaki toplu dönüştürme kutusuna yapıştırarak bütün değerleri tek seferde yeniden yazabilirsiniz.
Evet ve genellikle daha iyidir. Medya sorgusunun içinde rem, sizin html kuralınıza değil tarayıcının başlangıç yazı tipi boyutuna göre çözümlenir; böylece 48rem'lik bir kırılma noktası varsayılanlarda 768px eder ve metnini büyüten okuyucularda büyür. em de orada aynı şekilde davranır. Px ile yazılan kırılma noktaları ise okuyucu ne seçerse seçsin sabit kalır.
Hayır. Tarayıcılar alt piksel uzunlukları hesaplar ve boyama sırasında cihaz piksellerine oturtur; bu yüzden 0.9375rem, 16px kökte tam olarak 15px görünür. 0.94rem'e yuvarlamak değeri 15.04px'e taşır ve bu hata bir ızgara ya da dikey ritim boyunca birikir. Dönüştürücünün yazdığı tam değeri kopyalayın, oturtma işini tarayıcıya bırakın.
CSS 1px'i 1/96 inç, 1pt'yi 1/72 inç olarak tanımlar; dolayısıyla 1px = 0.75pt ve 16px = 12pt olur. Tablodaki punto sütununun arkasındaki oran budur. Android'in dp'si ise ayrı bir sistemdir: 160 dpi'da 1dp = 1px'tir; 16dp'lik bir Material boşluğunun web'de rem dönüşümüne değil de 16px'e yakın düşmesinin nedeni budur.