PX'ten REM'e Çevirme (CSS Birim Dönüştürücü)

Nasıl çalışır?

CSS kodunuzu sol panele yapıştırın; rem karşılıkları sağ panelde yazarken oluşur. Hesap tek bölmedir: rem = px ÷ kök yazı boyutu. Tarayıcıların varsayılan kök boyutu 16 pikseldir, bu yüzden 16px 1rem, 24px 1.5rem, 14px 0.875rem olur. Sitenizin html etiketinde font-size: 62.5% yazıyorsa kök 10 pikseldir; o zaman kutuya 10 yazın, 24px 2.4rem çıkar. Araç dosyayı satır satır değil CSS kuralı olarak okur: yalnız iki noktadan sonraki değerler çevrilir. .mt-16px gibi bir sınıf adı, url(ikon-16px.png) gibi bir dosya adı ya da tırnak içindeki bir metin olduğu gibi kalır; line-height: 1.5 gibi birimsiz sayılara dokunulmaz. Elinizde CSS değil yalnızca sayı listesi varsa (Figma'dan aldığınız 16, 24, 32 gibi) her satırı ayrı değer olarak çevirir. Sonuç satırı kaç değerin çevrildiğini, kaç ince çizginin px bırakıldığını ve @media sorgularında kaç değerin 16 piksel tabanıyla hesaplandığını yazar. Ters yön için Yön seçiminde rem → px'i seçin.

Bu araç px'ten rem'e, rem px hesaplama, px to rem, px to rem converter, rem to px aramalarıyla da biliniyor.

rem nedir?

rem (root em), CSS'te kök öğenin yani html etiketinin yazı boyutuna göre ölçülen uzunluk birimidir. 1rem, html'in font-size değerine eşittir; tarayıcılarda bu varsayılan olarak 16 pikseldir. Kullanıcı tarayıcı ayarlarından yazı boyutunu büyüttüğünde rem ile yazılmış yazı, boşluk ve genişlikler hep birlikte büyür. Bu yüzden erişilebilir tasarımda yazı ve boşluk ölçüleri rem ile verilir. em'den farkı, iç içe öğelerde katlanmamasıdır: sayfanın her yerinde aynı kökü kullanır.

px (CSS pikseli) nedir?

CSS'teki px, ekranın fiziksel pikseli değil bir referans birimdir: yaklaşık bir kol boyu uzaklıktan bakıldığında 1/96 inç görünen nokta olarak tanımlanır. Yüksek yoğunluklu telefon ekranlarında 1 CSS pikseli 2 ya da 3 fiziksel pikselle çizilir. px mutlak bir birim gibi davranır: kullanıcının tarayıcıda seçtiği yazı boyutunu dikkate almaz. Kenarlık ve gölge gibi her koşulda aynı kalınlıkta kalması gereken ayrıntılar için uygundur, yazı boyutu için ise erişilebilirliği zayıflatır.

px ile rem arasındaki fark nedir?

px sabittir: font-size: 14px yazılmış bir paragraf, kullanıcı tarayıcı ayarında yazı boyutunu büyük seçse bile 14 piksel kalır. rem ise kullanıcının seçimine bağlıdır: 0.875rem varsayılan ayarda 14 piksel, yazı boyutunu 20 piksele çıkaran birinde 17,5 pikseldir. Görünüşte aynı tasarım, ilk durumda bazı okurlar için küçük kalırken ikinci durumda onlarla birlikte büyür. Bu yüzden yazı, boşluk ve sayfa genişliği için rem; ince kenarlık ve gölge gibi kalınlığı sabit kalması gereken ayrıntılar için px kullanılır.

@media sorgusunda rem neden 16 ile hesaplanır

Bu, px'ten rem'e geçişte en sık düşülen tuzaktır. Bildirimlerin içindeki rem, html etiketinin yazı boyutuna bağlıdır: html { font-size: 62.5% } yazdıysanız 1rem 10 piksel olur. Ama @media (min-width: …) içindeki rem bu ayarı görmez; medya sorgusu sayfanın stilinden önce değerlendirilir ve tarayıcının başlangıç yazı boyutunu kullanır. Kullanıcı tarayıcı ayarını değiştirmediyse bu 16 pikseldir.

Sonuç: kökü 10 kabul edip 768px kırılım noktasını 76.8rem'e çevirirseniz tasarım 768 pikselde değil 1228 pikselde kırılır ve tablet görünümü masaüstüne kayar. Bu araç @media satırındaki değerleri kök kutusuna ne yazdığınızdan bağımsız olarak hep 16 ile çevirir (768px → 48rem) ve sonuç satırında kaç tane olduğunu söyler.

• Bildirim içinde: rem = px ÷ sizin kök değeriniz
• @media sorgusunda: rem = px ÷ 16 (tarayıcının başlangıç değeri)
• Kullanıcı tarayıcıda yazı boyutunu büyüttüyse ikisi birlikte büyür; erişilebilirlik kazancı buradan gelir

Hangi değerler px kalmalı

Her şeyi rem'e çevirmek doğru değildir. rem'in faydası, kullanıcı tarayıcıda yazı boyutunu büyüttüğünde yazı, boşluk ve kutu genişliğinin birlikte büyümesidir; görme güçlüğü olan biri için sayfa okunur kalır. Bu faydanın olmadığı yerde px daha güvenlidir.

1 piksellik kenarlık en bilinen örnektir: 0.0625rem'e çevrildiğinde kullanıcı yazı boyutunu küçülttüğü an 1 pikselin altına iner. Tarayıcılar böyle kesirli bir kenarlığı farklı yuvarlar; çizgi kimi ekranda bulanık, kiminde kalın görünür. Kenarlıkta istenen şey zaten büyümek değil, her yerde aynı ince çizgi olmaktır. Bu yüzden araç 1px ve daha ince değerleri varsayılan olarak px bırakır; isterseniz seçimle onları da çevirebilirsiniz. Gölge kayması (box-shadow), ikon çizgi kalınlığı ve görselin gerçek piksel ölçüsü de çoğu zaman px kalır.

• rem'e çevirin: font-size, padding, margin, gap, max-width, kırılım noktaları
• px bırakın: 1px kenarlık, ince ayırıcı çizgi, gölge kayması
• Birimsiz bırakın: line-height (1.5 gibi), z-index, flex oranı

Sık sorulanlar

16px kaç rem eder?

Kök yazı boyutu varsayılan 16 piksel olduğunda 16px tam 1rem'dir. Aynı tabanla 12px 0.75rem, 14px 0.875rem, 18px 1.125rem, 24px 1.5rem, 32px 2rem eder. Sitenizde html etiketine farklı bir font-size verildiyse kutuya o değeri yazın.

rem ile em arasındaki fark nedir?

rem her zaman html etiketinin yazı boyutunu temel alır, sayfanın neresinde olursa olsun aynı değeri verir. em ise içinde bulunduğu öğenin yazı boyutunu temel alır; iç içe öğelerde katlanarak büyür ya da küçülür. Bu araç yalnız px ile rem arasında çevirir; em değerlerine dokunmaz.

font-size: 62.5% kullanıyorum, ne yazmalıyım?

62.5%, 16 pikselin onda biri yani 10 pikseldir. Kök kutusuna 10 yazın; 24px 2.4rem, 14px 1.4rem olur. @media sorgularındaki değerler ise yine 16 ile çevrilir, çünkü medya sorgusu html etiketindeki bu ayarı görmez.

Sınıf adlarım ve görsel dosya adlarım bozulur mu?

Hayır. Araç yalnız CSS bildirimlerinin değer kısmını çevirir. .p-16px gibi seçiciler, url(arka-plan-32px.png) gibi adresler, tırnak içindeki metinler ve yorum satırları olduğu gibi kalır.

CSS kodum bir yere gönderiliyor mu?

Hayır. Çevirme tamamen tarayıcınızda yapılır; yapıştırdığınız stil dosyası hiçbir sunucuya gitmez.

Kaynaklar

• W3C — CSS Values and Units Module Level 4, §6.1 font-relative lengths (rem)