CSS kafa karıştırıcı yönlerinden biri, metin ölçeklendirme için yazı tipi boyutu özelliğinin uygulanmasıdır.
Bu yazı boyutu özelliklerinin hangisi web için en uygunudur? Bu, çeşitli tartışma ve eleştirilerin ortaya çıktığı bir sorudur.
Bu makalede, bu yazı boyutu özellikleri arasındaki fark ve bunların en iyi nasıl kullanılacağı hakkında fikir verir.
Pixels (px)
Responsive tasarımın ortaya çıkmasından önce, tipografiden genişliğe, padding ve yüksekliğe kadar her şey için yazı tipi boyutlandırma özelliği olarak yaygın olarak kullanıldı. Ancak, pikseller sabit boyutlu birimlerdir ve görünümün boyutuna göre değişmez. Pikselleri kullanarak reponsive bir web sitesi oluşturmak istiyorsanız, medya sorgularındaki değerler de dahil olmak üzere CSS stil sayfasındaki tüm piksel tabanlı değerleri takip etmek çok zor olabilir. Peki, CSS stil sayfamızda minimum değişiklikler yapmamıza izin verebilecek, ancak yine de ölçeklenebilir olabilen hangi yazı tipi özelliğini kullanabiliriz? Bu noktada em, rem, yüzde ve viewport units birimleri devreye giriyor.
Kullanılabilecek alanlar : border çizgisi sınırları ve genel elemanlar; box shadow değerleri.
Kullanılmasa daha iyi olacak alanlar: Tipografi. (İstisna: CSS reset işleminde temel yazı tipi boyutu ayarlama).
Em
Em, tarayıcı tarafından piksel değerlerine dönüştürülen esnek, ölçeklenebilir bir yazı boyutu birimdir. Chrome’daki varsayılan yazı tipi boyutu 16 piksel ise 1 em = 16 pikseldir. Em ile ilgili büyük bir yanlış anlama, üst öğenin boyutunu baz almasıdır. Bu yazıda, em kavramını açık ve ayrıntılı olarak anlatmıştır. Gerçekten em’in nasıl çalıştığını öğrenmek istiyorsanız, yukarıda belirtilen makaleyi atlamayın. EM, başlıklar, metinler, paragraflar gibi tipografi ve kenar boşlukları, dolgu vb. Tipografiyle ilişkili öğeler için yaygın olarak kullanılır. Temel html ve body yazı tipi boyutunu piksel olarak ayarlarsanız ve tipografi öğenizin özellikleri em kullanılarak tanımlanırsa, reponsive tasarım için yapmanız gereken tek şey, temel düzeydeki varsayılan yazı tipi boyutunu ve tüm em değerleri otomatik olarak temel seviyeye kadar hesaplanır.
Belgenin yazı tipi boyutu 15px ise, 1em 15px’e eşittir. Em ölçeklenebilir, bu nedenle 2em 24px, .5em 6px’e eşittir.
Rem
Root EM anlamına gelir. Em hesaplama karmaşasından kurtarmak için geliştirilmiştir.
Em ve ex için daha öngörülebilir bir alternatiftir ve @media dahil olmak üzere aynı amaçlar için kullanılır.
Rem, html elementinin yazı boyutunu baz alır. Html öğesinin yazı boyutu 16 piksel ise, 1rem = 16 pikseldir. Rem, html öğelerinin ne kadar iç içe olduğuna bakılmaksızın daima html elementini baz alacaktır.
Percents
Yüzde birimi birkaç temel fark dışında “em” birimine çok benzer. Mevcut yazı tipi boyutu %100’e eşittir (yani 12px = %100). Yüzde birimini kullanırken metniniz mobil cihazlar ve erişilebilirlik için tamamen ölçeklenebilir durumda kalır.
Viewport vw/vh
Buradaki görünüm alanı, tarayıcının pencere boyutu anlamına gelir. Öğenizi, üst element veya root elemente değil, tarayıcı penceresi genişliğine göre boyutlandırmak istiyorsanız, görünüm alanı birimleri kullanmanız gereken yazı tipi boyutlandırma birimleridir.
vw birimi, yataydaki tarayıcı boyutunun 100/1’ine, vh ise ekran yüksekliğinin 100/1’lik bir bölümüne denk gelen bir ölçü birimidir.
div { width: 2vw; }Ekran çözünürlüğümüzün 1440×900 olduğunu düşünürsek;
2×1440/100 = 28,8px boyutunda bir ölçü elde etmiş oluruz.
div { width: 100vh; height: 100vh; }Değerlerini kullanarak 1440×900 bir boyut elde etmiş oluyoruz.
Bootstrap’i sık kullandığım için varsayılan html font boyutum piksel cinsindendir. Görüntülerin genişliğini ve yüksekliğini ayarlamak için yüzde kullanıyorum. Geri kalan bütün elemanlarda Rem kullanıyorum. Rem’in hesaplamalara getirdiği sadeliği seviyorum fakat bileşenleri modüler hale getirmek için sinir ettiği durumlar oluyor.
Bu yazı boyutu özelliklerini kullandıkça sizin için en idealinin hangisi olduğu ortaya çıkacaktır.