Css Ölçü Birimleri

Bu yazımızda Css’te kullandığımız ölçü birimlerini öğreneceğiz. Kod yazarken birden fazla ölçü birimini kullanabiliyoruz. O anki durumumuza göre kullanacağımız birimlerin artıları veya eksileri olabiliyor.

Örneğin responsive bir tasarım yaparken px kullanmak yerine % (yüzde) leri kullanmak bize avantaj sağlayacaktır. Bu yüzden tasarımlarımızı yaparken hangi birimleri kullanacağımızı özenle seçmeliyiz.

Değerler verilirken ölçü birimleri ile rakamlar arasında boşluk bırakılmaz.

Yani 10px, 3em vb..  bitişik yazılır. Eğer değer olarak 0 verilecekse birimi yazmadan da kullanabiliriz.

Örneğin 0px yerine direk olarak 0 yazabiliriz.

Şimdi bu birimlerin neler olduğuna bakalım;

► cm (santimetre) : 1 metre’nin yüzde biridir. (1cm = 37.8px)

► mm (milimetre) : 1 metre’nin binde biridir. (1mm = 3.78px)

► in (inç) : (1in = 96px = 2.54cm)

► px (pixel) : Monitörlerimiz aslında küçük karelerden oluşur. Burdaki her bir kare 1px’dir.

Örneğin ekran çözünürlüğümüz 1366×768 ise bu ekranın genişliği 1366px, yüksekliği 768px demektir. (1px = 1/96 in)

► pt (punto) : Basılı medyada kullanılan ölçü birimidir. (1pt = 1/72 in)

► pc (pika) : Tipografi ölçü birimidir. (1pc = 12 pt)

► em : Ana ebeveyn etiketin font boyutuna göre hesaplanır. Yani ana ebeveyn etiket olan body etiketinde font-size:16px ise 1em=16px veya 2em=32px olur. Eğer body etiketinde font-size:20px ise 1em=20px veya 2em=40px olur.

► rem : İlk ebeveyn etiketin font boyutuna göre hesaplanır. Örneğin bir p etiketi ve içerinde bir span etiketi olsun. p etiketinin font-size değeri 22px diyelim.

Burada span etiketine font-size:0.5rem dersek, font-size değeri 11px olacaktır. rem ile em arasındaki fark şudur;

em ana ebeveyn’e göre değişirken, rem ilk ebeveyn etiketine göre değişir.

► vw (viewport width) : Viewport, tarayıcı yani ekran genişliği demektir. Viewport width’i de örnek üzerinde açıklayalım. Örneğin 3vw demek tarayıcı genişliğinin yüzde 3’ü (3%) demektir.

► vh (viewport height) : Örneğin 3vh demek tarayıcı yüksekliğinin yüzde 3’ü (3%) demektir.

► % (yüzde) : Ebeveyn etikete göre değişim gösterir. Örneğin genişliği 80px olan bir div içerisindeki p etiketine genişlik değeri 25% dersek, p etiketinin genişlik değeri 20px olacaktır. Yani ebeveyn etiketi olan div’in genişliğinin 25% olacaktır.

 Önemli  Bazı Css özellikleri için negatif değerler de verebiliriz. Örneğin,  margin : -10px; gibi…

TARAYICI DESTEĞİ

Ölçü Birimi	Chrome	IE	Firefox	Safari	Opera
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	9.0*	19.0	6.0	20.0
vmax	26.0	Desteklenmiyor	19.0	7.0	20.0

Bu tabloda, tarayıcıların ölçü birimlerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.