Sitemizde 29 Kategoriye 2385 Eğitim Eklenmiştir, 4172 adet yorum bulunmaktadır.

CSS px, em, rem Kullanımı

CSS px, em, rem Kullanımı

CSS px, em, rem Kullanımı


CSS ile uygulamalarımızda tasarımlar yaparken sıklıkla ölçü birimlerini birlikte kullanırız. Ancak bu ölçü birimlerinin arasındaki farklar veya benzerlikler konusunda fikir sahibi miyiz? İşte bu yazı size px, em, rem nedir sorusuna cevap verecek ve arasındaki farkları örneklerle açıklayacaktır.

Erişilebilir web siteleri oluştururken, ölçü birimlerini çalışmanıza dahile ederken düşünmeniz gerekir. px kullandığınızda kullanıcı tercihlerini ön planda almadığınız anlamına gelir. Kullanıcı ekranı yaklaştırdığında yada yazı varsayılan yazı tipini değiştirdiğinde px ölçü birimi kesinlikle değişmeyecektir ancak em yada rem yapıldığında yeniden boyutlandırma yaparak kullanıcıya daha iyi bir deneyim sunacaktır.

Bunun devamı olarak, html öğesinin yazı tipi boyutunu yüzde olarak ayarlamanız önerilir. Tarayıcı yazı tipi boyutunun 16 piksele (yani varsayılan) ayarlandığını varsayarsak, html (root) öğesinin yazı tipi boyutunu %62,5 olarak ayarlamak varsayılan olarak 1rem ila 10 piksel olacaktır.

Bir süredir em ve rem CSS birimleri kullanmış olabilirsiniz, ancak ikisi arasındaki fark hala belirsiz görünüyor. Bu makalede, orantısız boyutlara sahip web siteleri oluşturmaktan kaçınmak için belirli bir birimin farkını ve ne zaman kullanılacağını açtık.(Sizlerinde farklı yöntem ve teknikleri varsa yorumlarla bu yazıyı zenginleştirmenizi tavsiye ederim)

CSS Ölçü Birimleri Arasındaki Farklar

Piksel (px), web sitelerinde yaygın olarak kullanılan bir CSS birimidir. px ölçeklenebilir değildir, mutlak bir birimdir. Başka bir öğenin değerindeki değişiklik, mutlak birimlerin değerini etkilemez. Atanan değer, kullanıcı ayarından bağımsız olarak sabittir.

Element (em) ve root Element(rem), tarayıcı tarafından eşdeğer piksel birimine yorumlanan duyarlı birimlerdir. Bunlar göreceli birimlerdir. Ana öğenin veya kök öğenin değerindeki değişiklik, göreli olarak birimlerin değerini etkiler. Cihazla ölçeklenirler. Peki, ikisini farklı kılan nedir? Fark, değerlerin tarayıcı tarafından nasıl türetildiğidir. Hesaplanan değerleri görüntülemek için Chrome Geliştirici Araçları’nı açın ve Computed sekmesine gidin. (Sağ tıkla incele Computed sekmesi)

em ülçüsünün hesaplanan piksel değeri, stillendirilen öğenin yazı tipi boyutuna göredir. Bu, mirasa tabi olmayan bir px ülçüsü tarafından açıkça geçersiz kılınmadığı sürece, üst öğelerden devralınan değerlerden de etkilenir.

rem ölçüsünün hesaplanan piksel değeri, root (html) öğesinin yazı tipi boyutuna göredir. Ancak bu, devralmaya tabi olmayan bir piksel birimi tarafından geçersiz kılınmadığı sürece, devralmanın bir sonucu olarak tarayıcıdaki yazı tipi boyutu ayarından etkilenir.

em Kullanımı

em ölçüsü ile hesaplanan piksel değeri, miras alınan (ebeveyn ve büyük ebeveyn) değerleri göz önünde bulundurarak stilize edilmiş öğenin yazı tipi boyutundan türetilir. Em ölçüsü kullanmak karmaşık olabilir. birimler, belirli bir tasarım öğesi bağlamında ölçeklenebilirliğe izin vermek için kullanılmalıdır, örn. menü öğelerinin dolgu, kenar boşluğu ve satır yüksekliğini em değerleri kullanacak şekilde ayarlamak, gezinme menü öğelerini uygun şekilde ölçeklendirmek için iyi çalışır.

Not: em birimi x elementinin font-büyüklüğünü esas alır.

Örnek: Yazı tipi boyutu 14 piksel olan bir section öğesi verildiğinde, dolgu özelliği 3em olarak ayarlanmış bir kural oluşturduğunuzda, 42 piksel (14 x 3 = 42) olarak değerlendirilir. Bu, html öğesine atanan yazı tipi boyutundan bağımsızdır. Basitçe söylemek gerekirse, em biriminin bildirildiği öğenin yazı tipi boyutu piksel birimi değerini belirler.

Hesaplanan:

Örnek:

Aşağıdaki örnekte font-size:20px olarak ayarlandığında border büyüklüğü 1 x 20px ve padding =2 x 20px olacak şekilde ayarlanacaktır.

CSS Ölçü Birimleri Arasındaki Farklar
Hesaplanan değer ekran çıktısı

rem Kullanımı

rem kullandığında yazı boyutu px olarak <html> öğesinin yazı boyutuna bağlıdır.

Örnek: root (html> elemanına 18 piksel yazı tipi boyutu atanmış ve kenar boşluğu özelliğine 2rem değeri atanmış bir web sayfası verildi. margin için hesaplanan değer 36px(18 x 2 = 36) olarak değerlendirilir.

Hesaplanan

Örnek:

page-wrapper class’a sahip olan section, ana (html) öğesinin (16px) yazı tipi boyutunu devralır. Bu değeri, 24 piksel (16 x 1.5 = 24 piksel) olarak hesaplayan yazı tipi boyutuyla (1,5em) çarpar.

Görünüşe göre, container sınıfında belirtilen dolgunun değeri, üst öğeden miras alacak. Doldurma değeri şimdi 48 piksel (24 x 2 = 48) olarak hesaplanacaktır.

Container sınıfı em ölçüsü bir yazı tipi boyutu belirtirse, hesaplama bu değeri kullanmak için daha da genişletilecektir. Örneğin, kapsayıcı sınıfında 1.5em yazı tipi boyutu belirtilmişse,

hesaplanan padding değeri şu şekilde olacaktır. 57.6px (16 x 1.5 x 1.5 x 2 = 72).

Bu devralınan değeri geçersiz kılmak için stillendirilen öğenin birimini açıkça px olarak ayarlamanız gerekir.

Örneğin,


CSS px, em, rem Kullanımı

Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#CSS #rem #Kullanımı

Van Web Tasarım

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir