6XC

PX ↔ REM ↔ EM ↔ PT Çevirici

CSS birimlerini çift yönlü çevirin — kök boyut ayarlanabilir; px, rem, em ve pt birlikte güncellenir.

828 görüntülenme

Nasıl Çalışır

rem = px ÷ kök boyut (varsayılan 16px, yani 24px = 1.5rem); em aynı mantıkla çalışır ama elemanın kendi kalıtılan yazı boyutuna göre — araçtaki "bağlam boyutu" alanı; pt baskı birimidir, 1pt = 1,333px (96dpi ÷ 72). Herhangi bir alana yazın, diğerleri otomatik güncellenir.

Somut örnek: 16px'lik bir taban üzerinde 1.25rem'lik bir başlık 20px olarak görüntülenir; kendi yazı boyutu 1.125rem (18px) olan bir bileşenin içine 0.875em'lik bir etiket yerleştirirseniz, sonuç 15,75px olur — çünkü em, kökü değil en yakın ebeveynini referans alarak katlanır.

Bilinmesi Gerekenler

  • rem, sabit bir tarayıcı varsayılanına değil kök elemente görecelidir. 16px varsayımı, kimse bunu değiştirmediği sürece geçerlidir. Bir kullanıcı erişilebilirlik ayarlarından tarayıcının varsayılan yazı boyutunu büyütürse — görme zorluğu çeken kullanıcılar arasında yaygın bir tercihtir — rem tabanlı her değer bununla orantılı olarak büyür. Piksel değerleri ise büyümez: 16px'lik bir paragraf, kullanıcının tarayıcı tercihi ne olursa olsun 16px kalır.
  • Erişilebilirlik rehberlerinin yazı boyutu ve boşluklar için rem önermesinin sebebi budur. rem ile kurulmuş bir tasarım, kullanıcının seçtiği yazı boyutuna uçtan uca saygı gösterir — başlıklar, gövde metni ve aralarındaki boşluklar birlikte büyür, yazı büyüdüğünde tasarım bozulmak yerine orantılı kalır.
  • em kendi iç içeliğine göredir ve katlanır. 1.5em büyüklüğündeki bir elemanın içindeki 1.5em değeri, kökün 2,25 katına denk gelir — kendi yazı boyutu bağlamına göre ölçeklenmesi gereken bileşenler (buton iç boşluğu gibi) için kullanışlıdır, birkaç seviye iç içe geçtiğinde ise riskli hâle gelir.
  • Eski "%62,5 numarası" — kökü 10px yapıp 1rem = 10px'e denk getirerek zihinsel hesabı kolaylaştırma — hâlâ çalışır ama yeni projelerde kaçınmakta fayda var: çoğu bileşen kütüphanesi 16px'lik bir kök varsayar, kökü değiştirmek üçüncü taraf kodlarda beklenmedik boyutlara yol açabilir.
  • pt, px'e göre tanımlıdır, tersi değil. CSS bu oranı 1in = 96px = 72pt olarak sabitler, yani 1pt = 96/72 = tam olarak 1,333px'tir. Bu özellikle bir tasarımı baskıya ya da PDF'e aktarırken önemlidir — pt orada asıl birimdir ve bu çevirim ekran ile baskı boyutlarının tutarlı kalmasını sağlar.

Sıkça Sorulan Sorular

em değerim rem'den neden farklı?

em, en yakın tanımlı yazı boyutuyla çarpılır ve iç içe katlanır: 1.5em içindeki 1.5em, kökün 2,25 katıdır. rem hep kökü referans alır — kazanmasının sebebi bu öngörülebilirliktir.

1pt gerçekten 1,333px mi?

CSS'te tanım gereği evet: 1in = 96px = 72pt. Baskı PDF'i ile CSS bu oranda anlaşır; fiziksel boyut ekranın gerçek DPI'ına bağlıdır.

Erişilebilirlik rehberleri yazı için neden px yerine rem önerir?

Çünkü rem, kullanıcının yazı boyutu tercihiyle birlikte ölçeklenir, px ise ölçeklenmez. Tarayıcısının varsayılan yazı boyutunu büyüten biri — görme zorluğu çekenler arasında yaygın bir uyarlama — rem tabanlı her yazı boyutu ve boşluk değerinin orantılı olarak büyüdüğünü görür; piksel tabanlı yazı ise orijinal boyutunda kilitli kalır. Erişilebilirlik denetimlerinin işaret ettiği tam da bu sorundur.

Kullanıcı tarayıcısının varsayılan yazı boyutunu değiştirirse rem değerlerine ne olur?

Otomatik olarak ölçeklenirler. Kök yazı boyutu tarayıcı varsayılanında bırakılmışsa ve kullanıcı bu varsayılanı örneğin 16px yerine 20px yaparsa, CSS'inizdeki her 1rem artık 16px değil 20px'e denk gelir — hiçbir kod değişikliği gerekmez. Bu yalnızca kök yazı boyutu ayarlanmadan bırakılmışsa ya da göreceli tanımlanmışsa çalışır, px ile sabitlenmişse çalışmaz.

Hiç px kullanmamalı mıyım?

Kullanmalısınız — gerçekten yazıyla birlikte ölçeklenmemesi gereken şeyler için: ince kenarlıklar, sabit boyutlu ikonlar ya da 1px gölgeler. Çoğu ekibin uyguladığı pratik kural şudur: yazı boyutu ve düzen boşlukları için rem, bileşene göreceli iç boşluklar için em, kullanıcının yazı boyutu ayarından bağımsız olarak görsel olarak sabit kalması gereken ayrıntılar için ise yalnızca px.

Yorumlar

Henüz yorum yok — ilk yorumu siz yazın!

Benzer Araçlar

Döviz Çevirici (Güncel ECB Kurları) USD, EUR, GBP, TL dahil 30+ para birimini Avrupa Merkez Bankası'nın günlük referans kurlarıyla çevirin. Ücretsiz, üyeliksiz. Çevir Pound (Lbs) - Kilogram Çevirici Pound'u kilograma, kilogramı pound'a anında çevirin — iki kutudan birine yazmanız yeterli. 1 lb = 0,4536 kg. Çevir Feet ve İnç - Cm Çevirici Feet ve inç'i santimetreye, santimetreyi feet-inç'e çevirin — 5'9" kaç cm gibi boy çevirileri anında. Çevir Fahrenheit - Celsius Çevirici °F'yi °C'ye, Celsius'u Fahrenheit'a anında çevirin — hava durumu, fırın ve vücut sıcaklıkları için referanslarla. Çevir