Px'e karşı Em vs. Rem: Hangi CSS Birimini Kullanmalısınız?

Web sayfaları oluştururken metnin yazı tipi boyutunu özelleştirmek için birkaç CSS birimi öğreneceksiniz. Pt, pc, ex, vb. gibi birçok birim vardır, ancak çoğu durumda en popüler üç birime odaklanmalısınız: px, em ve rem. Çoğu geliştirici genellikle bu birimler arasındaki farkların ne olduğunu anlamaz; bu nedenle, aşağıda bu birimlerin ayrıntılı bir açıklaması bulunmaktadır.

Devam etmeden önce, iki tür birim uzunluk olduğunu unutmayın: mutlak Ve akraba.

Mutlak Uzunluklar

Mutlak uzunluk birimleri sabittir ve bunlardan herhangi biri ile ifade edilen uzunluk, tam olarak bu boyutta görünecektir.

Mutlak uzunluk birimlerinin ekranda kullanılması önerilmez çünkü ekran boyutları çok değişkendir. Ancak, çıktı ortamı biliniyorsa, örneğin basılı düzen için kullanılabilirler.

Bağıl Uzunluklar

Göreceli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtir. Göreceli uzunluk birimleri, farklı işleme ortamları arasında daha iyi ölçeklenir.

1. Px (Piksel)

Piksel muhtemelen CSS'de en çok kullanılan birimdir ve web sayfalarındaki metnin yazı tipi boyutunu ayarlamak söz konusu olduğunda çok popülerdir. Bir piksel (1 piksel), basılı medyada bir inçin 1/96'sı olarak tanımlanır.

Ancak bilgisayar ekranlarında sandığınız gibi genellikle santimetre ve inç gibi gerçek ölçümlerle ilgili değildirler; sadece küçük ama görünür olacak şekilde tanımlanırlar. Neyin görünür olduğu cihaza bağlıdır.

Farklı cihazların ekranlarında, piksel yoğunluğu olarak bilinen farklı inç başına piksel sayısı vardır. Bir cihazın ekranındaki fiziksel piksel sayısını o cihazdaki içeriğin boyutunu belirlemek için kullandıysanız, her boyuttaki ekranda her şeyin aynı görünmesini sağlamakta sorun yaşarsınız.

Cihaz piksel oranının devreye girdiği yer burasıdır. Temel olarak, bir CSS pikselinin (1 piksel) cihazın ekranında başka bir cihazla karşılaştırıldığında aynı boyutta görünmesini sağlayacak ne kadar yer kaplayacağını hesaplamanın bir yoludur.

Aşağıda bir örnek verilmiştir: -

<div sınıfı="konteyner">
<div>
<h1>bu bir paragraf</h1>
<P>
 Lorem ipsum, dolor sit amet amet consectetur adipisicing elit.
 Reprehenderit olayı, gerçek veritatis aşk tanrısı delectus perferendis
 her yerde! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quaerat quaerat. Lorem ipsum dolor
 Elit bir yapı oluşturmak için oturmak. Hic quam beatae voluptatibus
 amet possimus iure impedit default in aliquid debitis, autem
 vel ullam aut, quod corporisratione atque ducimus dolorum.
</P>
</div>
</div>

.konteyner {
 genişlik: %100;
 yükseklik: 100vh;
 ekran: esnek;
 haklı içerik: merkez;
 hizalama öğeleri: merkez;
}
.konteynerdiv {
 maksimum genişlik: 500 piksel;
 dolgu: 5 piksel 20 piksel;
 kenarlık: 1 piksel gri düz;
 sınır yarıçapı: 10px;
}
P {
 yazı tipi boyutu: 16 piksel;
}

çıktı

Üstteki kutu, dizüstü bilgisayar gibi daha büyük bir ekranda görüntülendiğinde nasıl göründüğünü, alttaki kutu ise nasıl göründüğünü gösterir. telefon gibi daha küçük bir ekranda görüntülendiğinde.

Her iki kutudaki metnin nasıl aynı boyutta olduğuna dikkat edin. Temelde piksel böyle çalışır. Web içeriğinin (yalnızca metnin değil) cihazlar arasında aynı boyutta görünmesine yardımcı olur.

2. Em (M)

Çoğu CSS birimi tipografiden geldiği için em birimi adını büyük harf 'M' (em)'den almıştır. Ana öğenin geçerli yazı tipi boyutunu temel olarak kullanır. Ebeveynden miras alınan yazı tipi boyutuna bağlı olarak bir öğenin yazı tipi boyutunu büyütmek veya küçültmek için kullanılabilir.

Diyelim ki yazı tipi boyutu 16 piksel olan bir ebeveyn div'iniz var. Bu div'de bir paragraf öğesi oluşturur ve buna 1em yazı tipi boyutu verirseniz, paragraf yazı tipi boyutu 16 piksel olacaktır.

Ancak, başka bir paragrafa 2em yazı tipi boyutu verirseniz, bu 32 piksele dönüşür. Aşağıdaki örneği göz önünde bulundurun:

<div sınıfı="div-bir">
<p sınıfı="bir em">10 piksele göre 1 em</P>
<p sınıfı="iki em">10 piksele dayalı 2 em</P>
</div>
<div sınıfı="div-iki">
<p sınıfı="bir em">10 piksele göre 1 em</P>
<p sınıfı="iki em">10 piksele dayalı 2 em</P>
</div>
</div>

.div-bir {
 yazı tipi boyutu: 15 piksel;
}
.div-iki {
 yazı tipi boyutu: 20px;
}
.bir-em {
 yazı tipi boyutu: 1em;
}
.two-em {
 yazı tipi boyutu: 2em;
}

çıktı

Em'in metnin boyutunu nasıl büyütebileceğini ve ana kapsayıcıdan devralınan mevcut yazı tipi boyutundan nasıl etkilendiğini görebilirsiniz. Özellikle karmaşık yapılı sayfalarda em kullanılması önerilmez.

Düzgün kullanılmazsa, DOM ağacındaki boyutların karmaşık kalıtımına dayalı olarak öğelerin düzgün boyutlandırılamayacağı ölçeklendirme sorunlarıyla karşılaşabilirsiniz.

3. Rem (Kök Em)

Rem, neredeyse em ile aynı şekilde çalışır, ancak temel fark, rem'in ebeveynin yazı tipi boyutu yerine sayfadaki kök öğenin yalnızca yazı tipi boyutuna referans vermesidir. Kök yazı tipi boyutu, kullanıcı tarafından tarayıcı ayarlarında veya geliştirici olarak sizin tarafınızdan belirtilen varsayılan yazı tipi boyutudur.

Bir web tarayıcısının varsayılan yazı tipi boyutu genellikle 16 pikseldir, bu nedenle 1rem 16px ve 2rem 32px olacaktır. Ancak, örneğin kök yazı tipi boyutunun 10px olarak değiştirildiği bir durumda; 1rem 10px ve 2rem 20px olacaktır.

İşleri daha net hale getirmek için bir örnek:

<div sınıfı="div-bir">
<!-- EM-->
<p sınıfı="bir em">Kapsayıcıya göre 1 em (40px)</P>
<p sınıfı="iki em">Kapsayıcıya göre 2 em (40px)</P>
<!-- REM-->
<p sınıfı="tek rem">Kök tabanlı 1 rem (16px)</P>
<p sınıfı="iki rem">Kök tabanlı 2 rem (16px)</P>
</div>

.div-bir {
 yazı tipi boyutu: 40px;
}
.bir-em {
 yazı tipi boyutu: 1em;
}
.two-em {
 yazı tipi boyutu: 2em;
}
.bir-rem {
 yazı tipi boyutu: 1rem;
}
.two-rem {
 yazı tipi boyutu: 2rem;
}

çıktı

Gördüğünüz gibi, REM birimleriyle tanımlanan paragraflar, kapsayıcımızda belirtilen yazı tipi boyutuyla tamamen bozulmaz ve kesinlikle göreli olarak işlenir. HTML öğesi seçicide tanımlanan kök yazı tipi boyutu.

Px'e karşı Em vs. Rem: Hangi Birim En İyisidir?

İç içe öğelerden oluşan karmaşık bir hiyerarşiye sahip olma olasılığı nedeniyle Em önerilmez. REM genellikle, PX'in aksine tarayıcı ayarlarında belirtilen yeni varsayılan/temel yazı tipi boyutuyla uygun şekilde ölçeklenir. Bu, web sayfalarınızdaki metin içeriğiyle çalışırken neden REM kullanmanız gerektiğini açıklar. REM yarışı kazanır. İçeriğinizi REM ile daha iyi şekillendirme ve ölçeklendirme, web sitesi yaratıcıları için ideal olduğundan sitenize yetenek katar. İçeriğinizin yerinde ölçümleri, web sitenizin görünümünü ve hissini belirleyecektir, ancak yaratıcı olmanız gerekir.