Bu yazıda CSS'te kullanılan ölçü birimlerini (cm, mm, in, px, pt, pc, em, ex, ch, rem, vw, vh, vmin, vmax, %) açıklayacağım.

Uzunlukları ifade etmek için kullanılan birkaç farklı CSS ölçü birimi vardır. Width, height, margin, padding, font-size vb. birçok CSS özelliği uzunluk değerlerini (20px, 1.5em vb.) alır.


özellik: değerbirim

Değer ve birim arasında boşluk bırakılamaz. Yani width özelliğinin değeri 10 piksel olacaksa bunu “10 px” yapamazsınız. “10px” olmalıdır. Değer 0 olmadığı sürece birimi yazmanız gerekir. Yani değer 0 ise 0px yazmanıza gerek yok sadece 0 yazabilirsiniz.

2 tür uzunluk birimi vardır. Bunlar Absolute ve Relative. Şimdi bakalım bunlar neymiş;


**Absolute (Mutlak) Uzunluklar**

Mutlak uzunluk birimleri sabittir ve bunlardan herhangi biri ile ifade edilen bir uzunluk, tam olarak verilen boyutta görünecektir.


cm

Santimetre. Metrenin yüzde biri değerindeki bir uzunluk ölçüsüdür.


mm

Milimetre. Metrenin binde biri değerindeki bir uzunluk ölçüsüdür.


in

İnç. (1in = 96px = 2.54cm).


px

Piksel. 1/96 inç değerindedir. Çoğunlukla kullanılan birimlerden biridir ve ekranda bulunan her noktanın bir tanesi anlamına gelir.


pt

Punto. 1/72 inç değerindedir.


pc

Pika. (1px = 12pt).



**Relative (Göreceli) Uzunluklar**

Göreceği uzunluk birimleri değişkendir. Sayfa veya ekran boyutu vb. etkenlere göre değerleri değişen ölçü birimleridir. Yani 1920x1080 çözünürlüğe göre yapılmış bir ölçülendirme 1366x768 çözünürlükte açıldığı zaman yeniden ölçeklenecektir.


em

Üst elementin font boyutuna göre hareket eder ve M harfinin genişliğini ölçü için referans alır.

Örnek: font-size: 12px olan bir div nesnesi içerisindeki p etiketine font-size: 2em verirseniz, p etiketi 24px lik bir font boyutuna sahip olur.


ex

em birimiyle aynı mantıkta çalışır. Tek farkı küçük x harfinin yüksekliğini veya 1em’in yarısını ölçü için referans alır.


ch

em ölçü birimi gibidir font ailesindeki 0 sayısının genişliğini ölçü için referans alır.


rem

Root em olarak düşünebilirsiniz. em birimiyle aynı mantıkta çalışır. Tek farkı rem birimi <html> etiketini baz alarak çalışır.

Örnek: html etiketinin font-size değeri 12px olsun. h1 etiketine 2rem, h2 etiketine 1.5rem verirseniz. h1 etiketinin font-size değeri 24px olur, h2 etiketinin ise 18px olur.


vw

Viewport width. Pencerenin genişliğini % olarak baz alır.

Örneğin 1vw = tarayıcı penceresinin genişliğinin yüzde 1’i anlamına gelir. Aynı şekilde 50vw = tarayıcı penceresinin genişliğinin yüzde 50’si.


vh

Viewport height. vw biriminde olduğu gibi buda pencerenin yüksekliğini baz alır.

Örneğin 1vh = tarayıcı penceresinin yüksekliğinin yüzde 1’i. 50vh = tarayıcı penceresinin yüksekliğinin yüzde 50’sidir.


vmin

Tarayıcı penceresinin o anda vw veya vh uzunluklarından en küçük olanına göre değişir.


vmax

Tarayıcı penceresinin o anda vw veya vh uzunluklarından en büyük olanına göre değişir.


%

Yüzde. Üst elementi baz alır.

Örneğin 600px genişliğe sahip bir element içerisinde p etiketi ile yazdığınız yazıyı o elementin yarısına kadar göstermek istiyorsanız p tagına width:50% değeri verirsiniz. Veya 600px genişliğe sahip bir element içerisinde 2 tane kutu oluşturmak istiyorsanız içerisine 2 adet yeni element oluşturup bunların genişliklerine 50% verirsiniz böylelikle yan yana 2 element elde edersiniz.


Bu birimlerle ilgili örnekleri W3schools CSS Units sayfasında bulabilirsiniz.


Bu ölçü birimlerinin tarayıcı desteği ise şu şekilde;