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.

/* style */ html {   font-size: 18px; }  section {   font-size: 14px;   padding: 3em; }

Hesaplanan:

/* computed style */ html {   font-size: 18px; }  section {   font-size: 14px;   padding-bottom: 42px;   padding-left: 42px;   padding-right: 42px;   padding-top: 42px; }

Ö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.

<!DOCTYPE html> <html>     <style>         div{             width: 500px;             font-size:20px;             border:1em solid red;             padding:2em;         }     </style> <body>     <div>         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias odio itaque ipsa modi, veritatis adipisci eos voluptates assumenda qui libero facere totam nisi suscipit, blanditiis, quia dolor nihil nesciunt veniam?</p>     </div>   </body> </html>
CSS Ölçü Birimleri Arasındaki Farklar