Nasıl kullanılır?
- Siteniz kök yazı tipi boyutunu değiştiriyorsa bu değeri ayarlayın (örneğin html { font-size: 62.5% } değeri 10px yapar).
- px'i rem'e veya rem'i px'e dönüştürmek için iki kutudan birine değer girin. Üst öğeye göre boyutlandırma yapıyorsanız em'e geçin.
- Hızlıca değer bulmak için tabloyu kullanın veya tüm px uzunluklarını tek seferde dönüştürüp sonucu kopyalamak için bir CSS kodu yapıştırın.
Nasıl çalışır?
rem = px ÷ kök yazı tipi boyutu. Varsayılan 16px kök boyutunda 24px, 1.5rem; 14px ise 0.875rem eder. em aynı formülü kullanır, ancak üst öğenin yazı tipi boyutunu temel alır. Bu nedenle iç içe kullanılan em değerleri birbiriyle çarpılır; rem ise her zaman kök öğeyi temel aldığı için bu sorunu önler.
Yazı tipi boyutları ve boşluklar için rem kullanmak, kullanıcı tarayıcı ayarlarından varsayılan yazı tipi boyutunu artırdığında metnin de ölçeklenmesini sağlar. Bu, az gören kullanıcılara yardımcı olur. Değerler dört ondalık basamağa yuvarlanır.
Kod dönüştürücü, px ile biten sayıları dönüştürür. Yorumları, url(…) ifadelerini ve tırnak içindeki metinleri olduğu gibi bırakır; isterseniz 1px değerlerini korur (ince kenarlıklar genellikle 1px kalmalıdır), 0px değerlerini 0 olarak yazar ve varsayılan olarak @media ve @container koşullarını değiştirmez. Çünkü medya sorgularında rem ve em, ayarladığınız kök yazı tipi boyutundan bağımsız olarak her zaman tarayıcının başlangıç yazı tipi boyutunu temel alır. calc() ifadelerinin anlamını çözümlemez; yalnızca içlerindeki px sayılarını değiştirir. Her uzunluk kendi başına dönüştürüldüğünden bu işlem yine de doğrudur.
Örnekler
Varsayılan kök boyutu
16px kök boyutunda: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
%62,5 yöntemi
CSS'inizde html { font-size: 62.5% } ayarı varsa kök boyut 10px olur; bu durumda 14px = 1.4rem ve 24px = 2.4rem eder. Eşleşmesi için kök yazı tipi boyutu alanına 10 yazın.
Bir bileşeni dönüştürme
“1px değerlerini koru” seçeneği açıkken padding: 24px 16px; border: 1px solid #ddd; şu hâle gelir: padding: 1.5rem 1rem; border: 1px solid #ddd;
Sık sorulan sorular
rem mi, em mi kullanmalıyım?
Çoğu yazı tipi boyutu, boşluk ve sayfa düzeni için rem kullanın; her yerde tutarlı sonuç verir. Düğme içindeki boşluk gibi bir değerin kendi bileşeninin yazı tipi boyutuna göre ölçeklenmesini istiyorsanız em kullanın.
Medya sorguları neden rem'e dönüştürülmüyor?
Kullanabilirsiniz; ancak medya sorgusunda 1rem, html öğesinin yazı tipi boyutuna değil, her zaman tarayıcının varsayılan yazı tipi boyutuna (genellikle 16px) eşittir. Bu nedenle dönüştürücü varsayılan olarak medya sorgularını atlar. Yine de 16'ya bölmek istiyorsanız bu seçeneği kapatın.
Erişilebilirlik açısından rem, px'ten daha mı iyi?
Yazı tipi boyutları için evet: rem, kullanıcının varsayılan yazı tipi boyutu ayarını dikkate alırken px bunu dikkate almaz. Tarayıcı yakınlaştırması her iki birimde de çalışır.
Gizlilik
Dönüştürme işlemleri ve CSS kodu tarayıcınızda işlenir ve hiçbir yere gönderilmez.