EM vs REM vs PX – Neden sadece pixel kullanmamalıyız?
Neden böyle bir ayrım var? Çünkü; pikseller tam olarak istenileni karşılayamamakta. Bunun en büyük nedeni gelişen teknoloji ile birlikte dijital ekranların çeşitliliğinin çok fazla olması. Artık bir çok firma kendi ekran standardına göre boyutlandırma yapabiliyor. Bu nedenle farklı boyutlara adapte olabilen "em" ve "rem" birimlerinir kullanmak daha mantıklı olacaktır.
Ölçü Birimleri Kullanımı
1. Em kullanımı ;
<style>
.ornekler {
font-size: 8px;
}
.em {
width: 9em;
height: 2em;
background-color: lightcoral;
opacity: 0.8;
font-size: 2em;
text-align: end;
}
</style>
<body>
<div class="ornekler">
<div class="em">Em Örnek
<div class="em">Em Örnek
<div class="em">Em Örnek
</div>
</div>
</div>
</div>
</body>
Bu örneğin çıktısı:
bu şekilde olacaktır. Bunun nedeni kullandığımız ölçü birimi "em"in her zaman bir üst ebeveyn elementinden gelen boyutlandırma ile ona verdiğimiz değeri çarpmasıdır. Bu nedenle verdiğimiz değerler katlanarak arttı.
2. Rem Kullanımı ;
Aynı örnek üzerinden gittiğimizde,
<style>
.ornekler {
font-size: 8px;
}
.rem {
width: 9rem;
height: 2rem;
background-color: lightcoral;
opacity: 0.8;
font-size: 2rem;
}
</style>
<body>
<div class="ornekler">
<div class="rem">Rem Ö.
<div class="rem">Rem Ö.
<div class="rem">Rem Ö.
</div>
</div>
</div>
</div>
</body>
<style>
.ornekler {
font-size: 8px;
}
.rem {
width: 9rem;
height: 2rem;
background-color: lightcoral;
opacity: 0.8;
font-size: 2rem;
}
</style>
<body>
<div class="ornekler">
<div class="rem">Rem Ö.
<div class="rem">Rem Ö.
<div class="rem">Rem Ö.
</div>
</div>
</div>
</div>
</body>
Bu örneğin çıktısı ise :
bu şekilde olacaktır. Bunun nedeni kullandığımız ölçü birimi "rem"in her zaman en dış HTML elementinden gelen boyutlandırma ile ona verdiğimiz değeri çarpmasıdır. Hepsi aynı ölçüyü referans aldığı için aynı boyutta oldular.
Sonuç olarak;
Tarayıcılar standart yazı tipi boyutlandırması ile gelmekte ve kullanıcı bu boyutu piksel cinsinden değiştirebilmektedir. Eğer biz boyutlandırmayı piksellerle yaparsak bu özelliğin dışına çıkmış oluruz ve verimli olmaz.
- Rem kullanmak burada iyi olacaktır. Değer ne olursa olsun katsayı aynı kalacak ve temelde sayfa yapısı hiç bozulmayacak.
- Yerel bir sorgulama ve esnek kullanım gereken yerlerde Em kullanmak mantıklı olacaktır.
Bu yazımda kullandığım kaynaklar :
Hiç yorum yok:
Yorum Gönder