CSS Ölçü Birimleri

CSS ölçü birimleri, web tasarımında boyutları tanımlamak için kullanılır. Font büyüklüğünden kutu genişliğine, boşluklardan görsellere kadar her şey bu birimlerle belirlenir. Yanlış ölçü birimi kullanımı tasarımın bozulmasına, erişilebilirlik sorunlarına ve cihaz uyumsuzluklarına yol açabilir.

CSS Ölçü Birimleri Nedir? px, em, rem, pt ve % Farkları

Bu yazıda en çok kullanılan CSS ölçü birimlerini — px, em, rem, pt ve % — açıklıyor, farklarını ve hangi durumda hangisinin tercih edilmesi gerektiğini anlatıyoruz. Ayrıca modern ölçü birimleri olan vw, vh gibi viewport birimlerine de değiniyoruz.

CSS Ölçü Birimlerinin Türleri

CSS’te ölçü birimleri iki ana gruba ayrılır:

• Mutlak (Sabit) Ölçü Birimleri: px, pt
• Bağıl (Göreceli) Ölçü Birimleri: em, rem, %, vw, vh

Bağıl birimler, ekran boyutu veya üst öğenin font büyüklüğüne göre değişir; bu da onları responsive tasarımlar için daha esnek hale getirir.

px (Pixel) Nedir?

px, ekranda tek bir pikseli ifade eden sabit bir ölçü birimidir.

• Tarayıcı ve cihazlar arası fark göstermez.
• Özellikle kesin boyutlandırma gereken durumlarda kullanılır (ikonlar, border kalınlığı, küçük butonlar).

Avantajları:

• Kontrol kolaylığı
• Her tarayıcıda tutarlı görünüm

Dezavantajları:

• Kullanıcı tarayıcıda metin boyutunu değiştirdiğinde ölçeklenmez.
• Erişilebilirlik açısından dezavantajlı olabilir.

em Nedir?

em, bağıl bir ölçüdür ve üst öğenin (parent) font boyutuna göre hesaplanır.

• 1em = parent’ın font-size değeri
• Örneğin parent 16px ise 2em = 32px

Avantajları:

• Responsive tasarımda esneklik
• Parent bazlı tasarımlarda uyum

Dezavantajları:

• İç içe öğelerde çarpan etkisiyle boyutların kontrolden çıkması mümkün.

rem Nedir?

rem (root em), bağıl birimdir ancak root (html) elemanının font-size değerine göre hesaplanır.

• 1rem = html font-size değeri
• Varsayılan olarak çoğu tarayıcıda 1rem = 16px

Avantajları:

• Tutarlı ölçekleme (parent zincirinden etkilenmez)
• Modern responsive tasarımlar için ideal

html { font-size: 16px; }
body { font-size: 1rem; } /* 16px */
h1 { font-size: 2rem; }   /* 32px */

pt (Point) Nedir?

pt (point), geleneksel olarak baskı için kullanılan ölçü birimidir.

• 1pt = 1/72 inch
• Dijital tasarımda nadiren kullanılır.
• Baskıya yönelik CSS (print stylesheet) için tercih edilebilir.

% (Percent) Nedir?

%, bağıl bir ölçüdür ve genellikle parent öğeye göre hesaplanır.

• Font boyutlarında parent’ın font-size değerine göre çalışır.
• Genişlik/yükseklik ayarlarında parent kutuya göre oranlanır.

Viewport Ölçü Birimleri: vw, vh, vmin, vmax

Modern CSS ile birlikte gelen viewport birimleri, ekranın boyutuna göre dinamik ölçüler sağlar:

• vw: viewport genişliğinin yüzde 1’i
• vh: viewport yüksekliğinin yüzde 1’i
• vmin: genişlik ve yükseklikten küçük olanın yüzde 1’i
• vmax: genişlik ve yükseklikten büyük olanın yüzde 1’i

.hero {
  font-size: 5vw; /* Ekran genişliğinin %5’i */
}

Hangi Ölçü Birimi Ne Zaman Kullanılır?

Ölçü Birimi	Kullanım Alanı	Avantaj
px	Kesin boyutlar (ikon, border)	Sabit kontrol
em	Parent bazlı, modüler tasarımlar	Esneklik
rem	Tutarlı, root bazlı ölçekleme	Modern yaklaşım
pt	Baskı odaklı tasarımlar	Baskı uyumu
%	Oransal genişlik/yükseklik	Responsive uyum
vw/vh	Ekran boyutuna göre dinamik tasarımlar	Tam ekran uyum

Erişilebilirlik ve Ölçekleme

• px sabittir, kullanıcı tarayıcı zoom yapsa bile değişmez.
• em, rem ve % gibi bağıl birimler, kullanıcı ayarlarına uyum sağlar.
• Modern projelerde rem + viewport birimleri kombinasyonu yaygın olarak tercih edilir.

Sonuç

CSS ölçü birimleri, tasarımın temel yapı taşlarındandır.

• px: Sabit kontrol
• em/rem: Esnek ve responsive
• pt: Baskı odaklı
• %: Oransal
• vw/vh: Ekrana duyarlı

Projenin ihtiyacına göre doğru ölçü birimini seçmek, tasarımın hem estetik hem de erişilebilir olmasını sağlar.