Tüm CSS birimleri: mutlak, yazı tipine göre, görünüm alanına göre, akışkan işlevler ile açı, süre ve çözünürlük birimleri — her biri neye göre ölçülür ve ne zaman seçilmeli.
Mutlak birimler (px, pt) bağlamdan bağımsız sabit bir boyut tutar; göreli birimler (rem, vw, %) bir referans değere göre ölçeklenir. Yazı boyutları için rem'i tercih edin: kullanıcının kök yazı boyutu ayarına saygı duyar, böylece tipografiniz erişilebilirlik tercihini korur. Görünüm alanıyla büyüyüp küçülen ama hiçbir zaman alt veya üst sınırı aşmayan akışkan tipografi için clamp() kullanın.
Referans tablosu · 38 kayıt
CSS BirimleriExplained
38 of 38 rows
Mutlak
1/96 inç (CSS referans pikseli).
Sabit arayüz boyutlandırma: kenarlıklar, ince çizgiler, simge boyutları.
border: 1px solid #000;
1/72 inç (1pt = 1.333px).
Boyutların fiziksel kâğıda karşılık geldiği yazdırma stilleri.
font-size: 12pt;
1 santimetre (≈37.8px).
Gerçek dünya ölçümleri gerektiren baskı düzenleri.
margin: 2cm;
1 milimetre (≈3.78px).
İnce ayrıntılı baskı ölçümleri.
padding: 5mm;
1 inç (96px = 2.54cm).
İnç cinsinden boyutlandırılan baskı düzenleri.
margin: 1in;
Yazı tipine göre
Öğenin kendi yazı boyutu (üst öğesinden devralınır).
Çevredeki metinle birlikte ölçeklenen boşluklar.
padding: 1em;
Kök öğenin yazı boyutu (html öğesi).
Yazı boyutları: kullanıcının kök yazı boyutu ayarına saygı duyar.
font-size: 1.25rem;
Geçerli yazı tipinde '0' glifinin ilerleme genişliği.
Okunabilir bir satır uzunluğu ayarlayın (satır başına karakter sayısı).
max-width: 70ch;
Geçerli yazı tipinin x yüksekliği (küçük 'x' harfinin yüksekliği).
Yazı tipine bağlı dikey ölçüler.
line-height: 2ex;
Geçerli yazı tipinin büyük harf yüksekliği (bir büyük harfin yüksekliği).
ex'ten daha sıkı, büyük harflere göre boyutlandırılan dikey ölçüler.
padding-top: 0.5cap;
Geçerli yazı tipinde '水' (su) ideografının ilerleme genişliği.
Tek bir CJK karakter hücresini izleyen boyutlandırma.
width: 4ic;
Öğenin kendi hesaplanmış satır yüksekliği.
Öğeleri tam metin satırlarıyla boyutlandırın.
height: 3lh;
Kök öğenin satır yüksekliği.
Belgenin temel satır yüksekliğinin katlarıyla boşluklandırma.
margin-block: 2rlh;
Görünüm alanına göre
Üst öğenin aynı özelliğindeki değer.
Kapsayan öğeye göre boyutlandırılan akışkan düzenler.
width: 50%;
Görünüm alanı genişliğinin %1'i.
Ekran genişliğine göre boyutlanan tam genişlikli bölümler.
width: 100vw;
Görünüm alanı yüksekliğinin %1'i.
Ekran yüksekliğini kaplayan hero bölümleri veya katmanlar.
height: 100vh;
Görünüm alanının küçük boyutunun %1'i.
Öğeleri her yönelimde ekrana sığacak şekilde boyutlandırın.
font-size: 5vmin;
Görünüm alanının büyük boyutunun %1'i.
Görünüm alanının baskın eksenini doldurun.
font-size: 5vmax;
Küçük görünüm alanı yüksekliğinin %1'i (tarayıcı arayüzü tamamen görünür).
Genişletilmiş tarayıcı çubuklarının üzerinde sığan mobil tam yükseklik bölümleri.
height: 100svh;
Büyük görünüm alanı yüksekliğinin %1'i (tarayıcı arayüzü gizli).
Tarayıcı çubukları daralsa bile ekranı kapatması gereken arka planlar.
height: 100lvh;
Dinamik görünüm alanı yüksekliğinin %1'i; tarayıcı arayüzünü gösterilirken ve gizlenirken izler.
100vh'nin mobil çözümü: tarayıcı çubukları göründükçe yükseklik yeniden boyutlanır.
height: 100dvh;
Küçük görünüm alanı genişliğinin %1'i.
En dar görünüm alanı durumu için svh'nin genişlik karşılığı.
width: 100svw;
Büyük görünüm alanı genişliğinin %1'i.
En geniş görünüm alanı durumu için lvh'nin genişlik karşılığı.
width: 100lvw;
Dinamik görünüm alanı genişliğinin %1'i; tarayıcı arayüzünü izler.
Görünüm alanı tarayıcı çubuklarıyla yeniden boyutlandığında dvh'nin genişlik karşılığı.
width: 100dvw;
Satır içi eksen boyunca görünüm alanı boyutunun %1'i (yatay yazım modlarında genişlik).
Yazım yönünü izleyen görünüm alanı boyutlandırması.
width: 50vi;
Blok ekseni boyunca görünüm alanı boyutunun %1'i (yatay yazım modlarında yükseklik).
Dikey yazım modlarında da doğru kalan görünüm alanı boyutlandırması.
height: 50vb;
Akışkan
Bir alt ve bir üst sınırla çevrelenmiş tercih edilen değer.
Hiçbir zaman alt veya üst sınırı aşmayan akışkan tipografi.
width: clamp(320px, 80vw, 1100px);
Virgülle ayrılmış bağımsız değişkenlerinin en küçüğü.
Bir boyuta hiçbir zaman aşmaması için üst sınır koyun.
width: min(100%, 600px);
Virgülle ayrılmış bağımsız değişkenlerinin en büyüğü.
Görünüm alanıyla büyüyen bir alt sınır dayatın.
width: max(50%, 300px);
Açı
Tam dairenin 1/360'ı.
Döndürme dönüşümleri ve gradyan açı konumları.
transform: rotate(45deg);
Radyan; 1rad ≈ 57.2958deg.
Matematikten hesaplanan açılar, örneğin üretilen dönüşümler.
transform: rotate(1.5708rad);
Gradyan; 400grad = tam daire.
Eski veya arazi ölçümü tarzı açı değerleri.
transform: rotate(100grad);
1turn = tam 360° daire.
Bir bakışta okunan tam veya yarım dönüşler.
transform: rotate(0.5turn);
Süre
Bir saniye.
Animasyon ve geçiş süreleri.
transition: opacity 0.3s;
Bir milisaniye (1s = 1000ms).
Kısa arayüz geri bildirim animasyonları ve gecikmeler.
animation-duration: 150ms;
Çözünürlük
Çıktının inç başına nokta sayısı.
Baskıya yönelik çözünürlük medya sorguları.
@media (min-resolution: 300dpi)
Px birimi başına nokta; 1dppx standart 96dpi ekrana eşittir.