CSS’de REM Birimi Nedir?

eminbasbayan

4 dk okuma

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

CSS’de boyutları belirlemek için kullanılan en önemli göreceli (relative) birimlerden biri de REM (root em) birimidir. REM, EM birimine benzese de, bazı önemli farklara sahiptir. EM birimi ebeveyn öğeye bağlı olarak hesaplanırken, REM birimi her zaman kök (root) öğenin font boyutuna göre hesaplanır.

Bu yazıda, REM biriminin nasıl çalıştığını, EM ile farklarını, avantajlarını ve dezavantajlarını detaylı bir şekilde inceleyeceğiz. Eğer CSS ile responsive (duyarlı) tasarımlar yapıyorsanız, REM kullanımı size büyük kolaylık sağlayacaktır.

TEXT?

1. REM Nedir?

REM, "Root EM" anlamına gelir ve her zaman root (html) öğesinin font boyutuna göre hesaplanır.

1rem = html öğesinin font-size değeri
Tüm öğeler için sabittir, ebeveyn öğeden bağımsızdır.

Örneğin:

html {
  font-size: 20px;
}

h1 {
  font-size: 2rem; /* 2 * 20px = 40px */
}

p {
  font-size: 1rem; /* 1 * 20px = 20px */
}

Bu kodda:

html için font-size: 20px olarak belirlendi.
h1, 2rem yani 40px olacak.
p, 1rem yani 20px olacak.

Bu sistem, tüm sayfadaki öğelerin tutarlı bir şekilde ölçeklenmesini sağlar.

2. REM’in EM ile Farkı

EM ve REM arasındaki en büyük fark, hangi öğeye göre hesaplandıklarıdır.

EM → Ebeveyn (parent) öğenin font boyutuna göre hesaplanır.
REM → Root (html) öğesinin font boyutuna göre hesaplanır.

Örnek: EM ile REM Karşılaştırması

html {
  font-size: 16px;
}

article {
  font-size: 20px;
}

h2 {
  font-size: 2em; /* 2 * 20px = 40px */
}

h3 {
  font-size: 2rem; /* 2 * 16px = 32px */
}

h2 { font-size: 2em } → Ebeveyn (article) 20px olduğu için 2 * 20px = 40px
h3 { font-size: 2rem } → Her zaman root öğenin (html) font boyutuna göre hesaplanır. 2 * 16px = 32px

EM Kullanımında Karşılaşılabilecek Sorun

EM kullanıldığında, iç içe geçmiş öğelerde boyutlar katlanarak büyüyebilir veya küçülebilir.

ul {
  font-size: 1.5em;
}

Eğer bir liste iç içe geçmişse:

İlk ul öğesi → 1.5em olacak (ebeveynine göre büyüyecek).
İkinci iç içe ul öğesi → 1.5 * 1.5 = 2.25em olacak.
Üçüncü iç içe ul öğesi → 2.25 * 1.5 = 3.375em olacak.

Bu şekilde font boyutları kontrolsüz bir şekilde büyüyebilir.

Bu sorunu çözmek için REM kullanarak tüm liste öğelerinin kök font boyutuna göre ölçeklenmesini sağlayabilirsiniz.

3. REM Kullanımı: Hangi Durumlarda Kullanılmalı?

REM kullanmanın en büyük avantajı, sayfanın genel ölçeklenmesini tek bir noktadan yönetebilmenizdir.

Örneğin, kök öğenin (html) font boyutunu değiştirdiğinizde, tüm sayfanın ölçeği değişir.

html {
  font-size: 10px; /* Sayfanın genel boyutunu küçültür */
}

Bu değişiklik yapıldığında:

h1 { font-size: 3rem } → 3 * 10px = 30px olacak.
p { font-size: 1rem } → 1 * 10px = 10px olacak.

Bu yöntem sayesinde sayfa genelindeki öğeleri tek bir ayar ile yönetebilirsiniz.

4. REM ile Buton ve Bileşen Tasarımı

REM ile buton veya kart gibi bileşenlerin boyutlarını kolayca ölçeklendirebilirsiniz.

button {
  font-size: 1.5rem; /* Genel font boyutuna bağlı */
  padding: 0.5rem 1rem; /* Font boyutuna göre ayarlanır */
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

Avantajı:

Sayfa genelindeki font büyüdüğünde, buton da otomatik olarak orantılı büyüyecektir.
Responsive tasarımlar için uygundur.

5. REM’in Avantajları ve Dezavantajları

Avantajları:

Tutarlı ve ölçeklenebilir bir tasarım sağlar.
Tek bir noktadan (html) tüm site ölçeğini değiştirebilirsiniz.
Responsive tasarımlar için uygundur.
İç içe geçmiş öğelerde aşırı büyüme veya küçülme sorunu yaşanmaz.

Dezavantajları:

EM gibi, bileşen bazlı ölçeklendirme için ideal değildir.
Bazı özel durumlarda (örneğin buton içindeki padding gibi), EM daha esnek olabilir.

6. REM ile EM’i Birlikte Kullanma

Bazı durumlarda REM ve EM’i birlikte kullanmak en iyi sonucu verir.

REM → Genel font boyutlarını yönetmek için.
EM → Bileşen içinde öğeleri ölçeklendirmek için.

Örnek: REM ile Font, EM ile Padding Kullanımı

button {
  font-size: 1.5rem; /* Genel font ölçeği */
  padding: 0.5em 1em; /* Buton içindeki padding, font boyutuna bağlı */
  border-radius: 0.5em;
}