CSS Birimleri
CSS Birimleri
CSS, bir uzunluğu ifade etmek için birkaç farklı birime sahiptir.
widthBirçok CSS özelliği , margin, padding,
font-size, vb. gibi "uzunluk" değerleri alır .
Uzunluk , arkasından bir uzunluk birimi gelen bir sayıdır, örneğin 10px,
2em, vb.
Örnek
px (piksel) kullanarak farklı uzunluk değerleri ayarlayın:
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Not: Sayı ve birim arasında boşluk görünemez. Ancak, değer ise
0, birim atlanabilir.
Bazı CSS özellikleri için negatif uzunluklara izin verilir.
İki tür uzunluk birimi vardır: mutlak ve göreli .
Mutlak Uzunluklar
Mutlak uzunluk birimleri sabittir ve bunlardan herhangi birinde ifade edilen uzunluk tam olarak bu boyutta görünecektir.
Ekran boyutları çok farklı olduğundan, mutlak uzunluk birimlerinin ekranda kullanılması önerilmez. Ancak, çıktı ortamı biliniyorsa, örneğin baskı düzeni için kullanılabilirler.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Piksel (px) görüntüleme cihazına göredir. Düşük dpi cihazlar için 1 piksel, ekranın bir cihaz pikselidir (nokta). Yazıcılar ve yüksek çözünürlüklü ekranlar için 1 piksel, birden çok aygıt pikseli anlamına gelir.
Göreli Uzunluklar
Göreli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtir. Göreceli uzunluk birimleri, farklı oluşturma ortamları arasında daha iyi ölçeklenir.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
İpucu: em ve rem birimleri, mükemmel şekilde ölçeklenebilir bir düzen oluşturmada pratiktir!
* Viewport = tarayıcı penceresi boyutu. Görüntü alanı 50 cm genişliğindeyse, 1vw = 0,5 cm.
Tarayıcı Desteği
Tablodaki sayılar, uzunluk birimini tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |