CSS px, em, rem Kullanımı – Web Tasarım & Programlama

redra Mart 30, 2023

0 15 6 dakika okuma süresi

CSS px, em, rem Kullanımı – Web Tasarım & Programlama

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.

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

/* style */

html {

font-size: 18px;

}

section {

font-size: 14px;

padding: 3em;

}

Hesaplanan:

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

/* 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.

</p> <p><!DOCTYPE html><br /> <html><br /> <style><br /> div{<br /> width: 500px;<br /> font-size:20px;<br /> border:1em solid red;<br /> padding:2em;<br /> }<br /> </style><br /> <body><br /> <div><br /> <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><br /> </div></p> <p></body><br /> </html><br />

<!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>

- REDRA — 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.

</p> <p>/* style */<br /> html {<br /> font-size: 18px;<br /> margin: 2rem;<br /> }<br />

/* style */

html {

font-size: 18px;

margin: 2rem;

}

Hesaplanan

</p> <p>/* computed style */<br /> html {<br /> font-size: 18px;<br /> margin-bottom: 36px;<br /> margin-left: 36px;<br /> margin-right: 36px;<br /> margin-top: 36px;<br /> }<br />

/* computed style */

html {

font-size: 18px;

margin-bottom: 36px;

margin-left: 36px;

margin-right: 36px;

margin-top: 36px;

}

Örnek:

</p> <p><!DOCTYPE html><br /> <html><br /> <style><br /> /* style */<br /> html {<br /> font-size: 16px;<br /> }</p> <p> .page-wrapper {<br /> font-size: 1.5em;<br /> }</p> <p> .container {<br /> padding: 2em;<br /> }<br /> div{<br /> border:.5rem solid red;<br /> }<br /> </style><br /> <body><br /> <section class=”page-wrapper”><br /> Seviye 1<br /> <div class=”container”><br /> Seviye 2<br /> <div class=”container”><br /> Çocuk<br /> </div><br /> </div><br /> </section></p> <p></body><br /> </html><br />

<!DOCTYPE html>

<html>

<style>

/* style */

html {

font-size: 16px;

}

.page-wrapper {

font-size: 1.5em;

}

.container {

padding: 2em;

}

div{

border:.5rem solid red;

}

</style>

<body>

Seviye 1

Seviye 2

Çocuk

</div>

</section>

</body>

</html>

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,

</p> <p>/* style */<br /> html {<br /> font-size: 16px;<br /> }</p> <p>.page-wrapper {<br /> font-size: 1.5em;<br /> }</p> <p>.container {<br /> font-size: 1.5em;<br /> padding: 2em;<br /> }<br />

/* style */

html {

font-size: 16px;

}

.page-wrapper {

font-size: 1.5em;

}

.container {

font-size: 1.5em;

padding: 2em;

}

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

</p> <p>/* style */<br /> html {<br /> font-size: 16px;<br /> }</p> <p>.page-wrapper {<br /> font-size: 24px;<br /> }</p> <p>.container {<br /> font-size: 36px;<br /> padding-bottom: 72px;<br /> padding-left: 72px;<br /> padding-right: 72px;<br /> padding-top: 72px;<br /> }<br />

/* style */

html {

font-size: 16px;

}

.page-wrapper {

font-size: 24px;

}

.container {

font-size: 36px;

padding-bottom: 72px;

padding-left: 72px;

padding-right: 72px;

padding-top: 72px;

}

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

Örneğin,

</p> <p><!DOCTYPE html><br /> <html><br /> <style><br /> /* style */<br /> html {<br /> font-size: 62.5%;<br /> }</p> <p> .page-wrapper {<br /> font-size: 1.5em;<br /> }</p> <p> .container {<br /> padding: 2em;</p> <p> }<br /> div{<br /> border:.5rem solid red;<br /> }<br /> </style><br /> <body><br /> <section class=”page-wrapper”><br /> Seviye 1<br /> <div class=”container”><br /> Seviye 2<br /> <div class=”container”><br /> Çocuk<br /> </div><br /> </div><br /> </section></p> <p></body><br /> </html><br />

<!DOCTYPE html>

<html>

<style>

/* style */

html {

font-size: 62.5%;

}

.page-wrapper {

font-size: 1.5em;

}

.container {

padding: 2em;

}

div{

border:.5rem solid red;

}

</style>

<body>

Seviye 1

Seviye 2

Çocuk

</div>

</section>

</body>

</html>

Yukarıdaki container sınıfına sahip DIV’nin yazı tipi boyutu değerinin kök değil, üst öğesi temel alınarak hesaplandığını unutmayın. Buradaki ilginç şey, yukarıdaki HTML’deki Ebeveyn ve Alt’ın, aynı sınıf adını paylaşmalarına bakılmaksızın aynı yazı tipi boyutuna sahip olmamasıdır. Child öğesinin yazı tipi boyutu, ebeveyni, yani Parent’e göre hesaplanır ve Parent’in yazı tipi boyutu, ebeveyni yani Üst Ebeveyn’e göre hesaplanır.

Şu şekilde hesaplanır:

</p> <p> <section class=”page-wrapper”><br /> Seviye 1 (24px)<br /> <div class=”container”><br /> Seviye 2 (24 x 1.5 = 36px)<br /> <div class=”container”><br /> Çocuk (36 x 1.5 = 54px)<br /> </div><br /> </div><br /> </section><br />

Seviye 1 (24px)

Seviye 2 (24 x 1.5 = 36px)

Çocuk (36 x 1.5 = 54px)

</div>

</section>

em kullanırken, yazı tipi boyutunu diğer öğelerde açıkça belirtmek yerine html öğesinde tanımlamanız önerilir.

Tarayıcı Ayarlarının Etkisi

Kullanıcı tarafından tarayıcıda ayarlanan yazı tipi boyutu, bir web uygulamasında CSS rem ölçüsü kullanıldığında değeri etkileyebilir. Bu, kalıtımın bir sonucu olarak em ölçüleri de etkiler.

Html öğesinde yazı tipi değeri ayarlanmadığında

Aşağıdaki örnek verildiğinde,

</p> <p><!DOCTYPE html><br /> <html><br /> <style><br /> /* style */<br /> html {<br /> box-sizing: border-box;<br /> }</p> <p> .page-wrapper {<br /> font-size: 2rem;<br /> }<br /> </style><br /> <body><br /> <section class=”page-wrapper”><br /> Seviye 1 (24px)<br /> <div class=”container”><br /> Seviye 2 (24 x 1.5 = 36px)<br /> <div class=”container”><br /> Çocuk (36 x 1.5 = 54px)<br /> </div><br /> </div><br /> </section></p> <p></body><br /> </html><br />

<!DOCTYPE html>

<html>

<style>

/* style */

html {

box-sizing: border-box;

}

.page-wrapper {

font-size: 2rem;

}

</style>

<body>

Seviye 1 (24px)

Seviye 2 (24 x 1.5 = 36px)

Çocuk (36 x 1.5 = 54px)

</div>

</section>

</body>

</html>

“page-wrapper” sınıf adına sahip öğenin yazı tipi boyutu, kök öğede hiçbir yazı tipi boyutu ayarlanmadığından tarayıcı ayarlarına bağlı olacaktır. Varsayılan olarak, tarayıcı yazı tipi boyutu “16px” olarak ayarlanmıştır ve kök öğe tarafından devralınır. Bir kullanıcı ayarlar aracılığıyla tarayıcının yazı tipi boyutunu değiştirirse, sayfa ayarlara uyacak şekilde oluşturulur. Kullanıcının varsayılan yazı tipi boyutunu 14 piksele ayarladığını varsayarsak, “page-wrapper” için hesaplanan yazı tipi boyutu değeri 28 piksele (14 x 2 = 28) eşit olacaktır.

HTML öğesinde em veya rem yazı tipi değeri ayarlandığında

Özel bir tarayıcı ayarıyla html öğesinde bir em yada rem font değeri ayarlandığında, hesaplanan piksel değeri, belirtilen yazı tipi boyutuyla tarayıcı yazı tipi boyutu ayarının katları olacaktır.

Örneğin, bir web sitesinin html öğesinin yazı tipi boyutu özelliği 1.5em olarak ayarlanmışsa ve tarayıcı yazı tipi boyutu 14 piksel olarak ayarlanmışsa, kök öğenin hesaplanan piksel değeri 1,5 x 14 = 21 piksel olacaktır.

Tavsiye Edilen CSS Ayarları

font-size ile ilgili sorunları çözmek için html öğesinin font büyüklüğünü %62.5 (10px) olarak ayarlamak daha rahat tasarım yapmayı kolaylaştırır.

</p> <p>* {<br /> box-sizing: border-box;<br /> }</p> <p>html {<br /> font-size: 62.5%;<br /> }</p> <p>body {<br /> margin: 0;<br /> font-size: 1.6rem; /* 16px */<br /> }</p> <p>h1 {<br /> font-size: 3.2rem; /* 32px */<br /> }<br />