CSS Ölçü Birimleri | Göreceli ve Mutlak Değerler

Px, pt, em, vm kısaltmaları ilk bakışta size bir şey ifade etmiyorsa, CSS ölçü birimleri hakkında büyük eksikliğiniz var demektir.

HTML elementlerin doğru bir şekilde boyutlandırılabilmesi için CSS ölçü birimleri iyi anlaşılmalıdır. Bir tasarım şablonunun doğru bir ölçekle kodlara aktarılması için zorunludur.

Özellikle CSS kutu modelinin alt parameteresi olan yükseklik (height), genişlik (width) özellikleri ve boşluk katmanı  margin, padding ve border gibi özellikleri uygulayabilmemiz bu konunun iyi anlaşılmasıyla mümkün olur.

Bir elemente boyut verebilmek için bir sayısal değer ve hemen sonrasında ölçü birimi girilir.Verilecek sayısal değerler tam sayı veya ondalık sayı şeklinde olabilir.

Ayrıca CSS’de bazı özelliklerin negatif değer aldığını da unutmayın.

CSS, birden fazla ölçü birimini desteklemektedir.Bu birimler mutlak ve göreceli olmak üzere iki kısıma ayrılır.

CSS Ölçülendirme

CSS de iki tip ölçülendirme biriminden söz edebiliriz.

  • Mutlak (Absolute)
  • Göreceli (Relative)

Mutlak Ölçülendirme

Mutlak ölçülendirme birimleri, bulunduğu alana göre değişmeyen tam olarak o boyutu gösteren ölçülebilir değerlerdir.Ekranların farklı boyutlarda olmasından dolayı mutlak ölçü birimleri genelde web yayınlarında kullanılmaz.Daha çok basılı yayın için tercih edilir.

cm : Santimetre

Santimetre bildiğiniz gibi fiziksel bir ölçülendirme birimidir.Metrenin yüzde 1 değerine karşılık gelir.1cm yaklaşık olarak 37.8px değerine karşılık gelir.

mm : Milimetre

Milimetre de fiziksel bir ölçülendirme birimidir.Metrenin binde 1 değerine karşılık gelir.1mm yaklaşık olarak 3.78px değerine karşılık gelir.

in

İngilizlerin ölçü birimi olarak bilinen inç 2.54cm değerine karşılık gelir.CSS’de 1in 96px değerine karşılık gelir.

pt

Punto ya da kısaca pt ölçü birimi, basılı medya da kullanılan bir ölçü birimidir.1pt 1/72 inç olarak kabul edilir.

pc

Pika ya da kısaca pc 12 punto değerine karşılık gelen tipografi ölçü birimidir.

Px
Pixel, monitörlerin çözünürlüğüne bağlı bir birimdir.

Monitörünüze bir mercek yardımı ile baktığınızda kutucuklardan oluştuğunu görebilirsiniz. Bu kutucukların her biri 1 px değerine eşittir.

Mesela 1366X768 çözünürlüğe sahip bir ekranda yatayda 1366px, dikeyde 768px olarak ifade edilir.CSS de en çok kullanılan ölçü birimlerinden biridir.

Göreceli Ölçülendirme

Göreceli ya da duyarlı ölçülendirme birimleri, mutlak ölçülendirmeden farklı olarak bulunduğu ortama göre değişen uzunluk birimleridir.

em
Elementlerin font boyutuna göre değişen orjinalinde tipografi ölçü birimdir.Eğer 1em değerini 16px olarak alırsanız, her hangi bir boyutlandırma işleminde 2em değeri verdiğiniz de bu boyutun 32px değerine karşılık geldiğini söyleyebiliriz.

em ölçü birimi bir HTML elementleri hiyerarşisinde en yüksekte olan elementin font boyutuna göre değişiklik gösterir. Bu ölçü birimini tek bir paragrafta açıklamak oldukça zor. O yüzden ileriki bir zamanda rem ile karşılaştırmalı olarak ele alacağım bir yazı yayınlayacağım.

ex
Yazı tipinin x-yüksekliğine göre değişir.

rem
Root elementin font boyutuna göre oluşan ölçü birimdir.Rem, body seçicisin de tanımlanan font-size:16 px değerine göre 1rem 16px değerine eşit olur ve bir elemente 2rem değeri verdiğiniz de bu 32px değerine denk gelir.Em ölçü biriminden farklı olarak, rem sadece root(ana) elemente bağlı bir ölçü birimidir.

Viewport Ölçü Birimleri

Viewport, tarayıcı ekranın kullanıcı tarafından görünen kısmını ifade eder.

vw
Viewport width yani tarayıcı pencere genişliğini temsil eden bu ölçü birimi tarayıcı penceresinin yüzde(%) orantısını ifade eder.Yani 1vh değeri tarayıcı penceresinin(viewport) genişliğinin yüzde 1 (%1) değerine karşılık gelir.

vh
Viewport Height, vh(viewport width) ile benzer ölçü birimdir.Viewport yükseliğine göre ölçülendirme yapar.

vmin
Pencerenin o anda vh ya da vw uzunluklarından en küçük olana göre değişen ölçü birimidir.

vmax
Pencerenin o anda vh ya da vw uzunluklarında en büyük olana göre değişen ölçü birimidir.

% Yüzde Ölçü Birimi

Başka bir uzunluğuna bağlı olarak verilen yüzde orantı birimdir.Mesela sayfamızda 800px genişliğinde bir alan olsun ve içerisine eşit boylarda 4 kutu oluşturacağız.Bunun için kutuların genişliklerine width: 25%; değeri veriyoruz.Bunun neticesinde kutuların mutlak boyutu 200px değerine eşit olur.Yüzde ölçülendirme birimi responsive tasarım anlayışının en temel ölçü birimidir.

Gördüğünüz gibi CSS ölçü birimleri oldukça fazladır.Fakat işin içine girdiğiniz de göreceksiniz ki bunlardan en çok px, em, rem ve yüzde ölçü birimi ile karşılaşacaksız.Diğerleri pek tercih edilmezler.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin