CSS Birim Dönüştürücü (px / rem / em / vh / vw)

px yerine rem neden kullanılır

Tarayıcılar 16px ile başlar, ancak görme gücü düşük kişiler tarayıcı ayarlarında varsayılan yazı tipi boyutunu çoğu zaman artırır. rem ile boyutlandırılan metin bu ayarla büyür; px ile boyutlandırılan büyümez. Sayfa yakınlaştırması her ikisini de büyütür, ancak birçok okuyucunun güvendiği ayar yazı tipi boyutudur ve WCAG'nin metni yeniden boyutlandırma ölçütü, metnin kayıp olmadan 200% ölçeklenmesini bekler. Boyutu ve çevresindeki boşlukları rem ile belirtin; hairline çizgiler ve kenarlıklar için px kullanın.

em sütunu ve iç içe yapı

em, öğenin kendi yazı tipi boyutuna göre değişir; ancak font-size için bu, üst öğenin boyutu anlamına gelir. Buradaki em değerleri, üst öğenin kök boyutta olduğunu varsayar ve bu yalnızca en üst düzeyde geçerlidir. 0.875em boyutundaki bir öğenin içinde yeniden 0.875em kullanmak 14px yerine 12.25px verir ve küçülme katlanarak sürer. Bu nedenle rem daha güvenli varsayılandır; em ise bileşeninin metniyle birlikte ölçeklenmesi gereken boşluklara uygundur.

62,5% tabanı ve görünüm alanı birimleri

html { font-size: 62.5% } ayarı, 1rem değerini 10px yaparak hesaplamayı kolaylaştırır; eşleşmesi için taban boyutu olarak 10 girin. Bu ayar, üçüncü taraf bileşenleri de dahil olmak üzere rem ile boyutlandırılan her şeyi küçültür; bu nedenle body üzerinde yeniden okunabilir bir boyut belirleyin.

vw ve vh değerleri, 1440 × 900 görünüm alanını varsayar. Telefonlarda tarayıcı araç çubuğu görünürken 100vh, görünür alandan daha uzun olabilir; 100svh ve 100dvh bunu hesaba katan birimlerdir.

Nasıl kullanılır?

1. Piksel değerini (px) ve kök temel boyutunu (varsayılan 16px) girin.
2. Hesaplanan rem, em, vw ve vh değerlerini inceleyin.
3. Kullanıma hazır CSS kod parçacıklarını kopyalayın veya ölçek tablosuna bakın.

Gizlilik ve sınırlamalar

İstemci tarafı JavaScript'te anında çalışır.