Mutlak Uzunluk ve Göreceli Uzunluk Nedir, Birimler Nelerdir, Nerelerde, Nasıl ve Ne Zaman Kullanılırlar? CSS (Cascading Style Sheets) olarak adlandırılan işaretleme dili, HTML’e ek olarak metin ve format biçimlendirme için fazladan olanaklar sunar.
PX, EM, REM, %, VW ve VH olarak isimlendirilen boyutlandırma biçimleri de bunlardan bazılarıdır. CSS’de çeşitli ölçü birimlerini kullanarak öğelerin uzunlukları belirlenebilmektedir.
Width, margin, padding, font-size vb. gibi birçok CSS özelliği, “uzunluk” değerleri alır.
Boyut, arkasından bir uzunluk birimi gelen bir sayıdır, örneğin; 10px, 2em, vb.
Piksel (Pixel): Pikseller, grafik görüntüdeki tek bir nokta olarak tanımlanır ve genellikle görüntü alanı çözünürlüğüne bağlıdır. Bir görüntü alanı 1600×900 ise, bu tipik olarak her hücrede bir piksel bulunan 1600 piksel sütunları ve 900 piksel satırları olduğu anlamına gelir.
Mutlak Uzunluk ve Mutlak Uzunluk Birimleri
Mutlak uzunluk birimleri sabittir ve bunlardan herhangi birinde ifade edilen uzunluk tam olarak bu boyutta görünecektir. Ekran boyutları çok farklı olduğundan (Masaüstü, Tablet, Cep telefonu vb.), mutlak uzunluk birimlerinin ekranda kullanılması önerilmez. Ancak, çıktı ortamı biliniyorsa, örn; baskı düzeni için kullanılabilirler.
cm, mm, in (inches), px (pixels), pt (points), pc (picas) vb. birimler, mutlak uzunluk birimleridir. Bu birimler ile ifade edilen uzunluklar sabit olarak belirtilen değer uzunluğunda görünürler, ekran boyutlarına göre değişmezler.
Duyarlı web siteleri için px kullanmak sorunlu olabilir, ancak bazı öğeler için tutarlı boyutlandırma sağlamak adına kullanışlıdır. Yeniden boyutlandırılmaması gereken öğeleriniz varsa, px kullanmak iyi bir seçimdir.
Göreceli Uzunluk ve Göreceli Uzunluk Birimleri
Göreceli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtirler. Göreceli uzunluk birimleri, farklı oluşturma ortamları arasında daha iyi ölçeklenirler (Masaüstü, Tablet, Cep telefonu vb.).
Göreceli uzunluk birimleri, duyarlı tasarım için daha uygundurlar ve erişilebilirlik standartlarının karşılanmasına da yardımcı olurlar. Göreceli uzunluk birimleri, başka bir öğenin boyutuna göre yukarı ve aşağı ölçeklendirilebildikleri için farklı cihazlarda (Masaüstü, Tablet, Cep telefonu vb.) daha iyi ölçeklenirler.
En çok kullanılan bazı göreceli uzunluk birimlerinden;
em: Öğenin yazı tipi boyutuna göre göre ölçeklendirme yapar.
rem: Kök öğenin yazı tipi boyutuna göre ölçeklendirme yapar.
%: Üst öğeye göre ölçeklendirme yapar.
vw: Görüntü alanının genişliğine göre ölçeklendirme yapar.
vh: Görüntü alanının yüksekliğine göre ölçeklendirme yapar.
EM ve REM arasında ne fark var?
em ve rem, mirasa göre farklılık gösterirler. rem, kök öğeye (HTML) dayanmaktadır. rem kullanan her alt öğe, bir üst öğenin belirtilen farklı boyutları olup olmadığına bakılmaksızın, hesaplama noktası olarak HTML kök öğeyi kullanır.
em ise, ana öğenin yazı tipi boyutunu temel alır. Bir üst öğenin, kök öğeden farklı bir boyutu varsa, em hesaplaması kök öğeyi değil, üst öğeyi temel alacaktır. Bu, boyutlandırma için em kullanan iç içe öğelerin bazen beklemediğiniz bir boyuta dönüşebileceği anlamına gelir. Öte yandan, bir sayfanın belirli bir alanı için boyut belirtilmesi gerekiyorsa daha ayrıntılı kontrol sağlar.
Yazı tipi boyutlandırma, kenar boşlukları, dolgu, boşluk ve genişlik/yükseklik
px, em ve rem öncelikle yazı tipi boyutlandırma için kullanılırken, %, VW ve VH çoğunlukla kenar boşlukları, dolgu, boşluk ve genişlik/yükseklik için kullanılırlar.
Örnek Uygulama
Kullanıcının hiç değişiklik yapmadan öğeyi kullandığını düşünüyoruz;
1em = 16 piksel (1 * 16)
2em = 32 piksel (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16 piksel
2rem = 32 piksel
.5rem = 8 piksel
%100 = 16 piksel
%200 = 32 piksel
%50 = 8 piksel
Kullanıcının 16 piksellik değeri 14 piksel olarak değiştirerek öğeyi kullandığını düşünüyoruz;
1em = 14 piksel (1 * 14)
2em = 28 piksel (2 * 14)
.5em = 7 piksel (.5 * 14)
1rem = 14 piksel
2rem = 28 piksel
.5rem = 7 piksel
%100 = 14 piksel
%200 = 28 piksel
%50 = 7 piksel
Kullanıcının 480px x 800px olan bir mobil ekran görünümü kullandığını düşünüyoruz (görünüm alanının genişliği: 480px, görünüm alanının yüksekliği:800px);
1 VW = görünüm alanının genişliğinin %1’i (veya 4,8 piksel)
50 VW = görüntü alanının genişliğinin %50’si (veya 240 piksel)
1 VH = görünüm alanının yüksekliğinin %1’i (veya 8 piksel)
50 VH = görüntü alanının yüksekliğinin %50’si (veya 400 piksel)
Görünüm alanı boyutu değişirse, öğenin boyutu da sırasıyla değişir.
Bir Birimi Diğerine Göre Ne Zaman Tercih Etmelisiniz?
Bu sorunun tam bir cevabı yok maalesef. Bu tercih; duruma, projeye göre değişecektir.
Genel olarak, web sitesinin duyarlı bir tasarıma sahip olması isteniyorsa, px yerine göreli birimlerden bir tanesini seçmek en iyi seçenek olacaktır. Ancak, bir web sitesi yeniden boyutlandırmaya ihtiyaç duyulmayan öğelere sahip olacaksa ve kullanıcının farklı bir varsayılan boyut seçip seçmediği gözardı edilecekse px kullanılabilir. px bu tür durumlarda tutarlı sonuçlar sağlar.
Öğenin boyutunu üst öğenin boyutuna göre ölçeklendirmek istiyorsanız em’i kullanabilirsiniz.
Öğenin boyutunu kök boyutuna göre ölçeklendirmek istiyorsanız, ana boyut ne olursa olsun, rem’i kullanabilirsiniz. em kullandıysanız ve çok sayıda iç içe öğe nedeniyle boyutlandırma sorunları yaşıyorsanız, rem muhtemelen daha iyi bir tercih olacaktır.
Tüm görünüm alanının genişliğini dolduran tam genişlikte öğeler (%100) oluşturmak için vw kullanabilirsiniz.
Tüm görünüm alanının yüksekliğini dolduran tam yükseklikte öğeler (%100) oluşturmak için vh kullanabilirsiniz.
%, vw ve vh’ye benzer ancak, görünümün genişliğine veya yüksekliğine göre bir uzunluk ölçüsü değildir. %, ana öğenin genişliğinin veya yüksekliğinin bir yüzdesidir. Kenar boşluklarının genişliğini ayarlamak için % kullanabilirsiniz.
LÜTFEN DİKKAT! Bu sitede bilgi amaçlı olarak verilen tavsiyeleri herhengi bir platformda uygulamadan önce lütfen YASAL UYARI sayfamızı inceleyiniz. Bu konudaki tüm sorumluluk ziyaretçiye aittir.
