Temel olarak, CSS uzunluk birimleri web sitelerinin ölçülmesinde ve oluşturulmasında önemli bir rol oynamaktadır. Kenar boşlukları ve dolgular gibi birçok CSS özelliği, çeşitli sayfa öğelerini düzgün şekilde görüntülemek için uzunluk ölçümlerine bağlıdır. Öyleyse, her birinin kendi özel amacına hizmet eden, CSS'de uzunluğu ifade etmek için birkaç farklı birim olması şaşırtıcı değildir.

Tüm CSS uzunluk birimleri pozitif veya negatif sayılar olarak ifade edilebilir, ancak bazı özellikler yalnızca pozitif sayıları kabul eder (örneğin, yazı tipi boyutu). Sayıyı cm (santimetre) veya px (piksel) gibi gerçek uzunluk birimini temsil eden iki harfli bir kısaltma izler. Kuralın istisnası, uzunluk biriminin belirtilmesi gerekmeyen uzunluk 0'dır (sıfır).

CSS uzunluk birimleri iki tipte gelir: mutlak uzunluk birimleri ve Bağıl uzunluk birimleri.

Mutlak CSS uzunluk birimleri

Mutlak CSS uzunluk birimleri web tasarımı için uygun değildir. Fiziksel dünyadaki ölçümlerin dijital temsilidir ve ekran boyutu ve çözünürlüğü ile ilgili değildir. Belirli bir ünite için aynı değerlerin mutlak uzunlukları farklı ekranlarda değişebilir. Bu, DPI ekranındaki (inç başına nokta sayısı) farktan kaynaklanmaktadır. Daha yüksek çözünürlüklü ekranlar, daha küçük çözünürlüklü ekranlardan daha yüksek bir DPI'ye sahiptir, bu da resmin veya metnin daha küçük görünmesini sağlar. Mutlak birimler, inç, nokta ve görüntüdeki nesneleri ölçmenin yaygın olduğu basılı belgeler için stil sayfalarının tanımlanmasında çok daha kullanışlıdır.

Mutlak uzunluk birimleri:

birim Tanım
santimetre santimetre
aa milimetre
nın-nin inç (1 inç = 96 piksel = 2,54 cm)
px * piksel (1 piksel = 1/96/1)
nk nokta (1pt = 1 / 1/72)
PC'ler pika (1 adet = 12 pt)

Mutlak uzunluk birimlerinin çoğu web üzerinde işe yaramaz. Px gerekli.
Piksel, görüntüleme cihazına göredir. Bir ekran görüntüsü için, bir CSS pikseli tipik olarak ekranın bir cihaz pikseline (nokta) eşittir. Yazıcılar ve çok yüksek çözünürlüklü ekranlar için, bir CSS pikseli birden fazla cihaz pikseline işaret eder, böylece inç başına piksel sayısı 96 civarında kalır.

Göreceli (Göreceli) CSS uzunluk birimleri

birim Tanım
Emmek Öğenin yazı tipi boyutuna göre (2em, geçerli yazı tipinin 2 katı anlamına gelir)
exe Geçerli yazı tipinin x yüksekliğine göre (nadiren kullanılır)
che “0” genişliğe göre (sıfır)
rem Kök elemanın yazı tipi boyutuna göre
VW Ekran genişliğinin% 1'i *
VH Ekran yüksekliğinin% 1'i *
VM'ler Ekran boyutundan daha küçük boyut * 1
Vmax Ekran boyutundan daha büyük boyut * 1
% Ana öğeye göre

Göreceli CSS uzunluk birimleri sabit değerlere sahip değildir. Değerler önceden tanımlanmış başka bir değere veya özelliğe göredir. Göreli birimler web tasarımında daha kullanışlıdır, çünkü genişlik, yükseklik, yazı tipi boyutu vb. Elemanları doğru şekilde boyutlandırmayı kolaylaştırır, çünkü onları diğer bazı temel parametrelerle ilişkilendirebiliriz.

Yazı tipi Bağıl uzunluk

Yazı tipi göreceli birimleri önceden tanımlanmış yazı tipi boyutu veya yazı tipi ailesi değeri ile ilgilidir ve şunları içerir:

  • ex (x yükseklik)
  • ch (karakter)
  • em
  • rem (root em)

exe

ex volume “geçerli yazı tipinin x yüksekliği veya“EmmekYarının yarısı olarak tanımlanır ”. Belirli bir yazı tipinin yüksekliği x, o yazı tipinin küçük harfinin x yüksekliğidir. Yazı tipi ailesi değiştikçe değişir.

che

Bu, x yüksekliğine benzer, yalnızca ch, x karakterinin yüksekliği yerine sıfır (0) karakterinin genişliğine dayanır. Yazı tipi ailesi değiştikçe değişir.

Emmek

Em birimi, ana öğenin veya ana öğenin yazı tipi boyutuna eşit bir değere sahiptir. Örneğin, ana öğenin yazı tipi boyutu 30 piksel ise, o zaman tüm çocuklar için 1em 30 piksel (30 x 1) olarak hesaplanır. Sayının kesin bir sayı olması gerekmez. Örneğimizde, 0.5'i 1em ile değiştirirsek, bu değer 15 px (30 x 0.5) olarak hesaplanır.

Unutulmaması gereken bir şey, em değerinin hemen üst etiketin değerini almasıdır. Bu, iç içe geçmiş elemanlarda istenmeyen sonuçlara yol açabilir.

Örneğin, iç içe geçmiş üç elementimiz var. İlk eleman (root) 30px font büyüklüğüne ve iki yuvalanmış eleman 2em olarak ayarlanmıştır. Kök elemanın içine yerleştirilen bir elemanın yazı tipi boyutu 60 px (30 x 2) olurken, iç elemanın içine yerleştirilen bir elemanın yazı tipi boyutu 120 px (60 x 2) olur.

rem

rem em'e benzer, ancak değeri her zaman Kök öğenin yazı tipi boyutu (HTML belgelerinde HTML öğesi) eşit kalır. Em aşamada kullanılmaz.
Hızlı yanıt veren web siteleri geliştirirken rem birimi kullanışlıdır, çünkü sayfanın tamamını yalnızca html öğesindeki yazı tipi boyutunu değiştirerek ölçekleyebilirsiniz.

Ekran alanı Yüzde Uzunluk

Vitrin yüzde uzunlukları, görünümün genişliğine ve yüksekliğine dayanır ve şunları içerir:

  • vh (görünüm yüksekliği)
  • vw (görünüm genişliği)
  • vmin (görünüm alanı minimum)
  • vmax (maksimum görüntü alanı)

VW

Bu, “görüş genişliği” birimidir. 1vw, vizör genişliğinin 1 / 100'üne eşittir. Ana öğeden veya ana öğenin genişliğinden bağımsız olarak, değerin tüm öğeler için tutarlı kalması dışında bir yüzdeye benzer. Örneğin, pencerenin genişliği 1000 piksel ise, 1vw 10 piksel olacaktır.

VH

Yalnızca vw (görünüm alanı genişliği) birimi ile aynıdır, bunun yerine görünüm alanı yüksekliğine dayanır. 1vh, görüntüleme yüksekliğinin 1 / 100'üne eşittir. Örneğin, tarayıcının yüksekliği 900 piksel ise, 1 kare 9 piksel olarak kabul edilir.

VM'ler

vmin, görünüm yüksekliği ve genişliği arasındaki minimum değerin 1 / 100'üne eşittir. Başka bir deyişle, en küçük uzunluğu olan tarafın 1/100. Örneğin, boyutlar 1200 x 800 olsaydı, değer 8 piksel olurdu.

Vmax

Vmin'e benzer şekilde, görünümün yüksekliği ve genişliği arasındaki maksimum değerin 1 / 100'üne eşittir. Başka bir deyişle, en büyük uzunluğa sahip tarafın 1/100. Örneğin, boyutlar 1200 x 800 olsaydı, değer 12 piksel olurdu.

Yüzde Ölçü Birimi (%)

Yüzde teknik olarak bir uzunluk birimi değildir, ancak böyle bir ilişkidir, çünkü genellikle duyarlı web sitesi geliştirmede kullanılır.

Yüzde olarak ayarlanan bir uzunluk, ana öğenin aynı özelliğinin uzunluğuna dayanır. Örneğin, ana öğe 1000 piksel genişliğinde ise,% 50 genişliğe sahip iç içe öğe 500 piksel genişliğinde olacaktır.

Tarayıcı desteği

px, cm, mm, inç, pt, ve bilgisayar: Eski IE dahil tüm tarayıcılarda desteklenir.

rem: IE9 + dahil tüm tarayıcılar kullanımda.

vw, vh, ve VM: Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. Internet Explorer vmin, standart olmayan vm sözdizimi tarafından desteklenir.

Vmax:Chrome 20+, Firefox 19+ ve Opera 20+ ve Safari 6.1+. IE’de destek yok.