CSS birimleri mutlak (sabit) ve göreceli (bir şeye göre ölçeklenebilir) olarak bölünmüştür. Doğru seçim, yanıt veren ve erişilebilir düzenler için anahtardır.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
kullanın ölçeklendirilmemesi gereken şeyler için (kenarlıklar, küçük sabit ayrıntılar).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em iç içe yerleştirme bileşik davranış gösterir (çocuğun çocuğu çarpılır), bu beklenmedik şekilde artabilir. rem her zaman köke başvurur, bu nedenle tahmin edilebilir — yazı tipi boyutları ve aralıklandırma için standarttır. em kullanın, boyutlandırmanın yerel yazı tipine göre olmasını istediğiniz zaman (örneğin, yazısıyla ölçeklenen düğmedeki padding).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Tür için rem kullanmak, daha büyük bir varsayılan yazı tipi ayarlayan kullanıcılara saygı gösterir — px kırdığı gerçek bir erişilebilirlik kazancı.
Doğru birim, düzenleri yanıt veren ve erişilebilir yapar: rem tip/aralık için (tahmin edilebilir + kullanıcı ayarlarına saygı), %/vw/vh akışkan düzen, px sabit ayrıntılar ve em yerel olarak göreceli boyutlandırma.
Daha yeni viewport birimleri (dvh, svh) ayrıca mobil adres çubuğu yükseklik sorunlarını çözer.