CSS boyut birimleri (px rem em vh)

Arayüz tipografisi için rem tercih edin; px yalnızca ince kenarlıklar için kullanın.

Güncellendi:

BirimGöreli olduğuTipik kullanım
pxCihaz pikseli (CSS pikseli)Kenarlıklar, hassas ikonlar
remKök öğenin yazı tipi boyutuYazı ölçeği, boşluklar
emÜst öğenin yazı tipi boyutuBileşene yerel boyutlandırma
%Üst öğenin özelliğiGenişlikler, esnek düzenler
vwGörünüm alanı genişliğinin %1'iTam genişlikli bölümler
vhGörünüm alanı yüksekliğinin %1'iHero yüksekliği (mobil UI'ye dikkat)
vmin / vmaxGörünüm alanının kısa/uzun kenarıNeredeyse kare duyarlı boyutlar
ch“0” glifinin genişliğiKod blokları, sabit genişlikli alanlar
exYazı tipinin x yüksekliğiNadiren kullanılan ince tipografi
svh / lvh / dvhKüçük/büyük/dinamik görünüm alanıMobil tarayıcıya uygun güvenli yükseklik

Notlar

Sık sorulan sorular

1rem kaç px?
1rem kök öğenin yazı tipi boyutuna eşittir; varsayılan 16 px'te 1rem = 16 px.
em ile rem arasındaki fark nedir?
rem her zaman kök yazı tipi boyutuna göre, em ise geçerli öğenin devraldığı boyuta göredir.
Mobilde 100vh neden tutarsız?
Mobil tarayıcılar adres çubuğunu gizler/gösterir; 100vh görünür alandan büyük olabilir, destek varsa dvh veya svh kullanın.