CSS rem nedir?

CSS’te rem, ölçüyü belgenin kök öğesi olan html öğesinin hesaplanmış yazı boyutuna göre belirleyen göreli birimdir. Örneğin html yazı boyutu 20px ise 1rem = 20px, 1.5rem = 30px olur. em biriminden farklı olarak rem, aradaki ebeveyn öğelerin yazı boyutlarından etkilenmez.

rem nasıl çalışır?​

Bir elemanın font-size, padding, margin, gap veya genişlik gibi özelliklerinde rem kullandığınızda hesaplama html öğesinin yazı boyutundan yapılır. Kök boyut belirtilmemişse tarayıcının kullanıcı ayarları ve varsayılan stil kuralları belirleyici olur; bu nedenle 1rem değerini her ortamda kesin olarak aynı piksel değeri kabul etmemek gerekir.

Örneğin:


Bu örnekte kartın yazı boyutu ve iç boşluğu 20px, başlığın yazı boyutu 30px, başlık alt boşluğu ise 10px olarak hesaplanır. Kenarlık yarıçapı örnekte sabit 4px olarak tutulmuştur; yazı ölçeği değişince bu köşe büyümez.

rem kullanırken temel kararlar​

Kök yazı boyutunu tasarım sisteminin temel ölçüsü olarak düşünün. Aynı ölçeğe bağlı başlık, boşluk ve bileşen ölçülerinde rem kullanmak, tüm arayüzün tek noktadan ölçeklenmesini sağlar. Kullanıcının tarayıcı yazı boyutunu değiştirmesine saygı göstermek istiyorsanız kök yazı boyutunu zorla sabitlemek yerine varsayılan davranışı korumak daha uygundur.

1. Önce tasarımda temel ölçüyü belirleyin ve bunu html öğesinin yazı boyutuyla ilişkilendirin.
2. Kök boyutun katları olan değerlerle yazı, boşluk ve bileşen ölçülerini tanımlayın.
3. Farklı ekran boyutlarında yalnızca gerçekten değişmesi gereken kök boyutu veya bileşen değerlerini değiştirin.
4. Tarayıcıda kullanıcı yazı boyutunu artırarak düzeni test edin; metin taşarsa yalnızca değeri küçültmek yerine kapsayıcı genişliği ve satır akışını düzeltin.

Aynı ölçüyü ebeveyn yazı boyutundan bağımsız korumak istediğiniz yerlerde rem daha öngörülebilirdir. Bir bileşenin kendi yazı boyutuna göre orantılı büyümesi isteniyorsa em daha uygun olabilir; yazı ölçeğinden bağımsız CSS ölçüsü gereken ince çizgilerde ise px tercih edilebilir.


Bu tablo bir zorunluluk sıralaması değildir. Aynı projede üç birim birlikte kullanılabilir; seçim, ölçünün hangi değere bağlı olarak değişmesini istediğinize göre yapılmalıdır.

Sık yapılan hatalar​

1rem değerini her zaman 16px sanmak​

Bu yalnızca kök yazı boyutunun 16px olduğu durumda geçerlidir. html { font-size: 20px; } gibi bir kural veya kullanıcı ayarı sonucu hesap değişebilir.

rem ile em’i aynı kabul etmek​

em ebeveyn zincirindeki yazı boyutlarından etkilenebilir ve iç içe elemanlarda beklenmedik şekilde büyüyebilir. rem ise kök öğeyi referans aldığı için bu zincir etkisini azaltır.

Kök boyutu değişince her şeyin otomatik sığacağını düşünmek​

rem ölçüleri birlikte ölçeklenir; ancak uzun metin, sabit genişlik, satır yüksekliği veya taşma kuralları yine düzeni bozabilir. Bu nedenle yalnızca hesaplanan piksel değerini değil, gerçek içerikle oluşan yerleşimi de test edin.

Kaynaklar​

• MDN: CSS uzunluk birimleri

Sık sorulan sorular​

rem sadece yazı boyutunda mı kullanılır?​

Hayır. Boşluk, genişlik, yükseklik, kenar yuvarlaklığı ve benzeri uzunluk kabul eden CSS özelliklerinde de kullanılabilir.

rem responsive tasarım için yeterli midir?​

Tek başına yeterli değildir. rem ölçeklenebilir bir temel sağlar; düzenin farklı ekranlarda doğru çalışması için akışkan genişlikler, kırılma noktaları ve içerik taşması da ayrıca ele alınmalıdır.

html için rem kullanılır mı?​

Kullanılabilir. Kök öğenin font-size özelliğinde rem, döngü oluşturmak yerine font-size başlangıç değerini referans alır. Örneğin başlangıç değeri 16px ise html { font-size: 1.25rem; } sonucu 20px olur. Kullanıcının başlangıç tercihi farklıysa hesap da değişir.