CSS Birimleri

CSS Birimleri

CSS, uzunlukları farklı birimlerle ifade etmek için çeşitli birimler sunar.

Birçok CSS özelliği, "uzunluk" değerini kabul eder, örneğin widthvemarginvepaddingvefont-size vb.

Uzunluk, bir uzunluk birimi takip eden 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:Absolu birimveOranlı birim.

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

Ekranlarda绝对长度单位不建议使用，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。

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

* Piksel (px), izleme 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, bir diğer uzunluk özelliğine göre belirlenen uzunlukları tanımlar. Oranlı uzunluk birimleri, farklı render medyaları arasında daha iyi ölçeklendirme performansı gösterir.

Birim Açıklama TIY
em Elemanın yazı boyutuna göre (font-size) (2em, mevcut yazı boyutunun 2 katı anlamına gelir) Deneyin
ex Mevcut yazı tipinin x-height'ine göre (az kullanılır) Deneyin
ch Sıfır (")'ye göre genişlik Deneyin
rem Kök elemanın yazı boyutuna göre (font-size) Deneyin
vw Görüntüleme penceresinin* genişliğine göre %1 Deneyin
vh Görüntüleme penceresinin* yüksekliğine göre %1 Deneyin
vmin Görüntüleme penceresinin* daha küçük boyutuna göre %1 Deneyin
vmax Görünümün büyük boyutuna göre% Deneyin
% Ana öğeye göre Deneyin

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

* Görünüm (Viewport) = Tarayıcı penceresinin boyutu. Eğer görünüm 50 santimetre genişse, 1vw = 0.5 santimetre.

Tarayıcı Desteği

Tablo'daki rakamlar, bu uzunluk birimini tamamen destekleyen ilk tarayıcı sürümünü belirtmektedir.

Uzunluk Birimleri
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