Çalıştırılabilir CSS Dokümanları: Birimler rem em px

Q: rem ile em arasındaki fark nedir?

rem, kök elementin ( ) yazı boyutuna göredir, bu yüzden 1.5rem sayfanın her yerinde aynı boyuttadır. em ise elementin kendi yazı boyutuna göredir (font-size için ebeveyninkine), bu yüzden elementler iç içe olduğunda katlanır.

Q: Yazı boyutu için rem mi px mi kullanmalıyım?

Yazı boyutları için rem kullan. Okuyucunun tarayıcıdaki varsayılan yazı boyutu ayarına uyar, px ise onu yok sayar. Tarayıcı yakınlaştırması ikisini de ölçekler, ama her okuyucu yakınlaştırma kullanmaz.

Q: 100vh ile 100dvh arasındaki fark nedir?

Mobil tarayıcılarda 100vh, adres çubuğu gizliyken olan yüksekliktir, bu yüzden çubuk görünürken 100vh'lik bir bölüm görünür ekrandan uzundur. 100dvh (dinamik viewport yüksekliği) çubuk belirip kayboldukça onu takip eder, 100svh ise her zaman küçük olan yüksekliktir.

İç içe tek bir demoda rem ve em

rem, kök yazı boyutuna (<html> elementi, varsayılan 16px) göredir. em ise mevcut yazı boyutuna göredir; font-size için bu ebeveyninki demektir. Aynı class'ı üç kez iç içe koy, fark görünür:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rem vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .em  { font-size: 1.25em;  border-inline-start: 4px solid #f59e0b; padding-inline-start: 8px; }
    .rem { font-size: 1.25rem; border-inline-start: 4px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">em <div class="em">em <div class="em">em</div></div></div>
  <div class="rem">rem <div class="rem">rem <div class="rem">rem</div></div></div>
  <p id="out"></p>
  <script>
    const sizes = (cls) => [...document.querySelectorAll('.' + cls)].map((el) => getComputedStyle(el).fontSize).join(', ');
    document.getElementById('out').textContent = 'em: ' + sizes('em') + '  |  rem: ' + sizes('rem');
  </script>
</body>
</html>

Yazdırılan boyutlar tarayıcının hesapladıklarıdır. Her 1.25em ebeveynini çarpar: 20px, sonra 25px, sonra 31,25px. Her 1.25rem yalnızca köke bakar: 20px, 20px, 20px. em yazı boyutlarının iç içe listelerde ve menülerde kontrolden çıkmasının ve çoğu sitenin yazı boyutlarını rem ile vermesinin nedeni bu katlanmadır.

Her birim neye göre

Birim	Neye göre	Varsayılan olarak 1 birim
`px`	hiçbir şeye (bir CSS pikseli)	1px
`rem`	kök elementin (`html`) yazı boyutuna	16px
`em`	elementin yazı boyutuna; `font-size`'ın kendisi için ebeveyninkine	en üst düzeyde 16px
`%`	özelliğe bağlı (aşağıya bak)
`vw` / `vh`	viewport genişliğinin / yüksekliğinin %1'i
`dvh`, `svh`, `lvh`	dinamik, küçük ya da büyük viewport yüksekliğinin %1'i
`vmin` / `vmax`	viewport'un küçük / büyük kenarının %1'i
`ch`	mevcut fonttaki "0" karakterinin genişliği	yaklaşık yarım em
`ex`	mevcut fontun x yüksekliği	yaklaşık yarım em

Bir CSS pikseli bir cihaz pikseli değildir: 3x ekranlı bir telefonda 1px 3 cihaz pikseli genişliğindedir. Ekranlar arasında görsel olarak kabaca aynı boyutta kalır; px'in kenarlıklar ve gölgeler için hâlâ uygun olmasının nedeni budur.

Metinle ölçeklenen boşluklar için em

em yalnızca yazı boyutları için değildir. padding, margin, width ya da border-radius üzerinde "bu elementin yazı boyutunun katı" demektir. Bu, tek bir buton class'ını her boyutta çalıştırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 0.5em 1em;   /* scales with this button's own font size */
      border-radius: 0.4em;
      border: 0;
      background: #2563eb;
      color: white;
      margin: 4px;
    }
    .small { font-size: 0.75rem; }
    .large { font-size: 1.5rem; }
  </style>
</head>
<body>
  <button class="btn small">Small</button>
  <button class="btn">Normal</button>
  <button class="btn large">Large</button>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.btn')]
      .map((b) => b.textContent + ': font ' + getComputedStyle(b).fontSize + ', padding ' + getComputedStyle(b).paddingTop + ' ' + getComputedStyle(b).paddingLeft)
      .join('  |  ');
  </script>
</body>
</html>

Her butonun padding'i dikeyde yazı boyutunun yarısı, yatayda bir yazı boyutu kadardır, bu yüzden üçü aynı butonun üç boyutu gibi görünür. px padding ile her boyut için ayrı bir padding kuralına ihtiyacın olurdu.

Butonların varsayılan olarak sayfanın yazı boyutunu miras almadığına dikkat et (tarayıcılar form kontrollerine kendi boyutlarını verir), bu yüzden buradaki ortadaki buton Chrome'da 16px değil 13,33px'tir. Sayfayla eşleşmelerini istediğinde butonlara ve input'lara font: inherit ekle.

Yüzdeler: özelliğe bağlıdır

%'nin tek bir anlamı yoktur. Her özellik neyin yüzdesi olduğunu söyler:

Özellik	`%` neye göre
`width`, `max-width`, `left`, `right`	ebeveynin (kapsayıcı bloğun) genişliğine
`height`, `top`, `bottom`	ebeveynin yüksekliğine, yalnızca ebeveynin ayarlı bir yüksekliği varsa
`padding`, `margin` (dört kenarın hepsi)	ebeveynin genişliğine
`font-size`	ebeveynin yazı boyutuna (`150%` = `1.5em`)
`line-height`	elementin kendi yazı boyutuna
`transform: translate()`	elementin kendi boyutuna

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent { width: 400px; background: #e5e7eb; padding: 8px 0; }
    .child { width: 50%; height: 50%; padding-top: 5%; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c">child</div></div>
  <p id="out"></p>
  <script>
    const s = getComputedStyle(document.getElementById('c'));
    const r = document.getElementById('c').getBoundingClientRect();
    document.getElementById('out').textContent =
      'width ' + s.width + ', padding-top ' + s.paddingTop + ', rendered height ' + Math.round(r.height) + 'px';
  </script>
</body>
</html>

width: 50% 200px'tir, ebeveynin yarısı. padding-top: 5% 20px'tir: ebeveynin yüksekliğinin değil genişliğinin %5'i. height: 50% ise hiçbir şey yapmaz, çünkü ebeveynin ayarlı bir yüksekliği yoktur, bu yüzden çocuk yalnızca metni artı o padding kadar uzundur. Bu kuralı width ve height sayfası ayrıntılı anlatıyor.

vw, vh ve mobil adres çubuğu

1vw viewport genişliğinin, 1vh ise yüksekliğinin %1'idir. Tam ekran bölümler ve akışkan boyutlar (çoğunlukla clamp() içinde) için kullanışlıdırlar. Telefonlarda vh'nin bir püf noktası vardır: tarayıcının adres çubuğu kaydırdıkça kayarak girip çıkar ve 100vh çubuk olmadan olan yüksekliktir, bu yüzden height: 100vh olan bir hero, çubuk görünürken alttan kesilir. Yeni birimler bunu çözer:

Birim	Kullanılan yükseklik
`100vh`	çoğu mobil tarayıcıda büyük viewport (çubuklar gizli)
`100svh`	küçük viewport (çubuklar görünür): her zaman sığar
`100lvh`	açıkça büyük viewport
`100dvh`	dinamik viewport: çubuklar hareket ettikçe değişir

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits the screen even with the address bar visible */
}

vw'nin de kendi püf noktası var: dikey bir kaydırma çubuğu yer kapladığında (Windows'ta olduğu gibi) 100vw onun genişliğini de içerir, bu yüzden width: 100vw sayfadan geniş olup yatay bir kaydırma çubuğu ekleyebilir. "Ebeveynin tam genişliği" için width: 100% kullan.

Okunaklı satır uzunluğu için ch

ch, "0" karakterinin genişliğidir, bu yüzden max-width: 65ch bir paragrafı her yazı boyutunda satır başına kabaca 65 karakterle, yani rahat bir okuma uzunluğuyla sınırlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ch</title>
  <style>
    body { font-family: Georgia, serif; }
    p { max-width: 40ch; background: #f3f4f6; padding: 8px; }
    .big { font-size: 1.4rem; }
  </style>
</head>
<body>
  <p>This paragraph is limited to 40ch, about forty characters per line, however wide the page is.</p>
  <p class="big">At a bigger font size the box widens with the text, so each line still holds about forty characters.</p>
</body>
</html>

Hangi birimi kullanmalı

Ne için	Kullan	Neden
Yazı boyutları	`rem`	Her yerde tutarlı, okuyucunun yazı boyutu ayarına uyar
Bileşenlerdeki padding ve boşluklar	`rem` ya da `em`	Bileşenin kendi metniyle büyümesi gerektiğinde `em`
Kenarlıklar, ince çizgiler, gölgeler	`px`	Her yazı boyutunda ince kalmalı
Düzen genişlikleri	`%`, `fr`, `rem` ya da `ch` cinsinden `max-width`	Kapsayıcıyı takip eder, satır uzunluğunu sınırlar
Tam ekran bölümler	`svh` / `dvh` (bir `vh` yedeğiyle)	Mobil adres çubuklarını hesaba katar
Akışkan yazı	`rem` ve `vw` karıştıran `clamp()`	Ekranla birlikte sınırlar içinde büyür

rem neden okuyuculara uyar, px neden uymaz

Tarayıcılarda, daha büyük metne ihtiyaç duyan insanların kullandığı varsayılan yazı boyutu ayarı vardır. Bu ayar kök yazı boyutunu değiştirir, bu yüzden rem ve em cinsinden her şey onunla büyür. font-size: 14px ise okuyucu ne seçerse seçsin 14px kalır. Tarayıcı yakınlaştırması px'i de ölçekler, ama birçok okuyucunun güvendiği yazı boyutu ayarıdır. Yazı boyutlarını rem ile vermenin asıl nedeni budur.

Bazı siteler 1rem 10px'e eşit olsun ve hesap kolaylaşsın diye html { font-size: 62.5%; } ayarlar. Bu yine de okuyucunun ayarına uyar (seçtiği değerin %62,5'i), ama body üzerine okunaklı bir font-size vermeyi unutma, yoksa kendi boyutu olmayan her element 10px metin gösterir.

Sık yapılan hatalar

İç içe elementlerde em yazı boyutları. Her seviyede çarpılırlar. Yazı boyutları için rem kullan.
Hiçbir şey yapmayan height: 50%. Yüzdelik bir yüksekliğin çalışması için ebeveynin ayarlı bir yüksekliği olmalıdır.
padding-top: 10%'un ebeveynin yüksekliğini takip etmesini beklemek. Dikey padding ve margin yüzdeleri ebeveynin genişliğini kullanır.
Yatay kaydırma çubuğuna yol açan width: 100vw. Kaydırma çubuğunu da içerir. 100% kullan.
Telefonlarda kesilen height: 100vh. 100svh ya da 100dvh kullan.
html { font-size: 12px } ayarlamak. Kökteki bir px değeri bütün sayfa için okuyucunun yazı boyutu ayarını ezer. Köke dokunma ya da bir yüzde kullan.

Sıkça Sorulan Sorular

rem ile em arasındaki fark nedir?

rem, kök elementin (<html>) yazı boyutuna göredir, bu yüzden 1.5rem sayfanın her yerinde aynı boyuttadır. em ise elementin kendi yazı boyutuna göredir (font-size için ebeveyninkine), bu yüzden elementler iç içe olduğunda katlanır.

1rem kaç pikseldir?

Varsayılan olarak 16px, çünkü tarayıcılar kök yazı boyutunu 16px'e ayarlar. Kullanıcı tarayıcı ayarlarında varsayılan yazı boyutunu büyütürse ya da sen html { font-size: ... } ayarlarsan 1rem de onunla değişir.

Yazı boyutu için rem mi px mi kullanmalıyım?

Yazı boyutları için rem kullan. Okuyucunun tarayıcıdaki varsayılan yazı boyutu ayarına uyar, px ise onu yok sayar. Tarayıcı yakınlaştırması ikisini de ölçekler, ama her okuyucu yakınlaştırma kullanmaz.

rem yerine ne zaman em kullanmalıyım?

Bir butonun padding'i ya da metnin yanındaki bir ikonun boyutu gibi elementin kendi metniyle ölçeklenmesi gereken boşluklar için em kullan. Aynı class bu durumda her yazı boyutunda doğru görünür. Hiçbir şey katlanmasın diye yazı boyutları ve sayfa düzeyindeki boşluklar için rem kullan.

100vh ile 100dvh arasındaki fark nedir?

Mobil tarayıcılarda 100vh, adres çubuğu gizliyken olan yüksekliktir, bu yüzden çubuk görünürken 100vh'lik bir bölüm görünür ekrandan uzundur. 100dvh (dinamik viewport yüksekliği) çubuk belirip kayboldukça onu takip eder, 100svh ise her zaman küçük olan yüksekliktir.

İlgili kavramlar