CSS Birimleri

CSS Birimleri

CSS, uzunlukları ifade etmek için farklı birimler kullanır.

Birçok CSS özelliği “uzunluk” değeri alır, örneğin widthvemarginvepaddingvefont-size vb.

Uzunluk, bir uzunluk birimi izleyen bir sayıdır, örneğin}} 10pxve2em vb.

Örnek

px (piksel) ile farklı uzunluk değerleri ayarlayın:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Kişisel olarak deneyin

Sayı ve birim arasında boşluk olmamalıdır. Ancak, değer 0 ise birim atlanabilir.

Bazı CSS özellikleri, negatif uzunlukları kullanmayı izin verir.

Uzunluk birimleri iki türdedir:Absolute birimveOranlı birim.

Absolute uzunluk

Absolute uzunluk birimleri sabittir; herhangi bir absolute uzunlukla belirlenen uzunluk, kesin olarak bu boyutta görüntülenir.

Ekranda absolute uzunluk birimlerini kullanmaktan kaçınmak tavsiye edilir, çünkü ekran boyutları çok değişkendir. Ancak, çıktı medyusu bilindiğinde bunlar kullanılabilir, örneğin yazıcı düzeni için (print layout).

Birim Açıklama TIY
cm Santimetre Bir deneyin
mm Milimetre Bir deneyin
in İnç (1in = 96px = 2.54cm) Bir deneyin
px * Piksel (1px = 1/96 1in) Bir deneyin
pt Nokta (1pt = 1/72 1in) Bir deneyin
pc Pik (1pc = 12 pt) Bir deneyin

* Piksel (px), izleyici cihazına göre belirlenir. Düşük dpi cihazlar için, 1px ekranın bir cihaz pikselidir (nokta). Yazıcılar ve yüksek çözünürlüklü ekranlar için, 1px birden fazla cihaz pikseli anlamına gelir.

Oranlı uzunluk

Oranlı uzunluk birimleri, başka bir uzunluk özelliğine göre belirlenen uzunlukları belirler. Oranlı uzunluk birimleri, farklı render medyaları arasında daha iyi ölçeklenir.

Birim Açıklama TIY
em Elemanın yazı boyutuna göre (font-size) (2em, mevcut yazı boyutunun 2 katı anlamına gelir) Bir deneyin
ex Güncel yazının x-height'ine göre (az kullanılır) Bir deneyin
ch Sıfır ('0')'ye göre genişlik Bir deneyin
rem Kök elementin yazı boyutuna göre (font-size) Bir deneyin
vw Görünüm alanına göre * genişliğin %1 Bir deneyin
vh Görünüm alanına göre * yüksekliğin %1 Bir deneyin
vmin Görünüm alanına göre * daha küçük boyutun %1 Bir deneyin
vmax Görünüm alanına göre * daha büyük boyutun %1 Bir deneyin
% Ana elemente göre Bir deneyin

İpucu:em ve rem birimleri mükemmel genişleyebilir düzenler oluşturmak için kullanılabilir!

* Görünüm alanı (Viewport) = tarayıcı penceresinin boyutu. Eğer görünüm alanı genişliği 50 içindeyse, 1vw = 0.5cm'dir.

Tarayıcı desteği

Tablodaki rakamlar, bu uzunluk biriminin tamamen desteklenen ilk tarayıcı sürümünü belirtmektedir.

Uzunluk birimi
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0