Relative units, bir öğenin boyutunu başka bir değere göre belirleyen birimlerdir. Sabit (absolute) birimlerden farklı olarak, responsive tasarım için çok daha uygun ve esnek çözümler sunarlar.

Ana Relative Units

rem (root em)

• Root element'in (html) font-size'ına göre hesaplanır
• 1rem = html'in font-size değeri (genelde 16px)
• En çok kullanılan ve önerilen birim

html {
  font-size: 16px; /* 1rem = 16px */
}

.container {
  padding: 2rem; /* 32px */
  margin-bottom: 1.5rem; /* 24px */
}

em

• Parent element'in font-size'ına göre hesaplanır
• İç içe kullanımlarda kümülatif etki yapar
• Daha spesifik durumlarda kullanılır

.parent {
  font-size: 20px;
}

.child {
  padding: 1em; /* 20px (parent'ın font-size'ı) */
  font-size: 0.8em; /* 16px */
}

% (percentage)

• Parent element'in ilgili özelliğine göre hesaplanır
• Width/height için çok kullanışlı

.container {
  width: 80%; /* Parent'ın genişliğinin %80'i */
}

vw/vh (viewport units)

• vw: viewport width'in %1'i
• vh: viewport height'in %1'i
• 100vw = tam ekran genişliği

.hero {
  height: 100vh; /* Tam ekran yüksekliği */
  width: 100vw; /* Tam ekran genişliği */
}

vmin/vmax

• vmin: viewport'un küçük boyutunun %1'i
• vmax: viewport'un büyük boyutunun %1'i

ch

• "0" karakterinin genişliği
• Metin genişlikleri için kullanışlı

p {
  max-width: 65ch; /* Okunabilir satır uzunluğu */
}

Hangi Özellikte Hangisi Kullanılmalı?

Font-size → rem

h1 { font-size: 2.5rem; }
p { font-size: 1rem; }
small { font-size: 0.875rem; }

✅ Tutarlı ölçeklendirme ✅ Kullanıcı tercihlerine saygı

Spacing (padding/margin) → rem

.card {
  padding: 2rem;
  margin-bottom: 1.5rem;
}

✅ Tutarlı aralıklar ✅ Global ölçeklendirme

Width/max-width → % veya ch

.container {
  width: 90%; /* veya */
  max-width: 1200px;
}

p {
  max-width: 65ch; /* Okunabilirlik için */
}

Height (full-screen) → vh

.hero {
  height: 100vh;
  min-height: 500px; /* Fallback */
}

Line-height → unitless number

p {
  line-height: 1.6; /* Birim yok! */
}

✅ Font-size ile orantılı ölçeklenir

Border-radius → px veya %

.button {
  border-radius: 8px; /* Sabit yuvarlaklık */
}

.circle {
  border-radius: 50%; /* Tam daire */
}

Component içi ilişkiler → em

.button {
  font-size: 1rem;
  padding: 0.5em 1em; /* Font-size'a göre */
  border-radius: 0.25em;
}

✅ Component kendi içinde ölçeklenebilir

Örnek:

/* Modern CSS Architecture */
:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

html {
  font-size: 100%; /* Kullanıcı tercihlerine saygı */
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

/* Layout */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

/* Typography */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
p { 
  font-size: 1rem;
  max-width: 65ch;
}

/* Components */
.button {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* em kullanımı */
  border-radius: 0.25em;
}

/* Full-screen */
.hero {
  min-height: 100vh;
}

Altın kural: Genel olarak rem kullan, component(button, card, navbar, modal vb..) içi ilişkiler için em, layout için % ve tam ekran için vh tercih et!