Css Ölçü Birimleri

Merhaba Arkadaşlar,
Bu makalede, 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 % 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.Burda 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.

► %  : 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.

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

Tarayıcı Desteği

Ölçü BirimiChromeIEFirefoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.020.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.09.0*19.06.020.0
vmax26.0Desteklenmiyor19.07.020.0

Bu resimde, 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.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 34 – Object Fit Kullanımı

Sonraki : Css Dersleri 36 – Değişken Tanımlama

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +