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.
| Birim | Göreli olduğu | Tipik kullanım |
|---|---|---|
| px | Cihaz pikseli (CSS pikseli) | Kenarlıklar, hassas ikonlar |
| rem | Kök öğenin yazı tipi boyutu | Yazı ölçeği, boşluklar |
| em | Üst öğenin yazı tipi boyutu | Bileşene yerel boyutlandırma |
| % | Üst öğenin özelliği | Genişlikler, esnek düzenler |
| vw | Görünüm alanı genişliğinin %1'i | Tam genişlikli bölümler |
| vh | Görünüm alanı yüksekliğinin %1'i | Hero yüksekliği (mobil UI'ye dikkat) |
| vmin / vmax | Görünüm alanının kısa/uzun kenarı | Neredeyse kare duyarlı boyutlar |
| ch | “0” glifinin genişliği | Kod blokları, sabit genişlikli alanlar |
| ex | Yazı tipinin x yüksekliği | Nadiren kullanılan ince tipografi |
| svh / lvh / dvh | Küçük/büyük/dinamik görünüm alanı | Mobil tarayıcıya uygun güvenli yükseklik |
Notlar
- Mobilde 100vh gizli tarayıcı çubuğunu içerebilir — destekleniyorsa dvh/svh tercih edin.
- Kullanıcının yazı tipi boyutu rem'i etkiler — erişilebilirlik için genelde iyi.
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.