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.
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 = 40pxh3 { 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;
}
- Font boyutu REM ile belirlendiği için sayfa genelinde tutarlıdır.
- Padding ve border-radius EM ile belirlendiği için öğe içinde orantılıdır.
7. REM Kullanımı ile Daha İyi CSS Tasarımları
CSS’de REM birimi, tutarlı ve ölçeklenebilir tasarımlar oluşturmak için en iyi çözümlerden biridir.
Öğrendiğimiz konular:
- REM, root (html) öğesinin font boyutuna göre hesaplanır.
- EM ile farkı, ebeveyn yerine root öğeye bağlı olmasıdır.
- Font ölçeklendirmesini tek noktadan yönetmek için idealdir.
- Responsive ve duyarlı tasarımlar için uygundur.
REM kullanarak, sayfanızın ölçeklenebilirliğini artırabilir ve modern, esnek tasarımlar oluşturabilirsiniz.