Px vs. Em vs. Rem: Hangi CSS Birimini Kullanmalısınız?

Px vs. 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.





GÜNÜN YAPILAN VİDEOSU

Devam etmeden önce, iki tür birim uzunluğu olduğuna dikkat edin: mutlak ve akraba .



Mutlak Uzunluklar

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





Ekran boyutları çok farklı olduğundan, mutlak uzunluk birimlerinin ekranda kullanılması önerilmez. Ancak, çıktı ortamı biliniyorsa, örneğin basılı bir düzen için kullanılabilirler.

Birim Tanım
santimetre santimetre
mm milimetre
içinde inç (1 inç = 96 piksel = 2,54 cm)
piksel * piksel (1 piksel = 1/96/1 inç)
nokta puan (1pt = 1/72/1 inç)
bilgisayar maça (1 adet = 12pt)

Göreli Uzunluklar

Göreli uzunluk birimleri, başka bir uzunluk özelliğine göre bir uzunluk belirtir. Göreceli uzunluk birimleri, farklı oluşturma ortamı arasında daha iyi ölçeklenir.



Birim Göre
içinde* Öğenin yazı tipi boyutuna göre (2em, geçerli yazı tipinin boyutunun 2 katı anlamına gelir)
eski Geçerli yazı tipinin x yüksekliğine göre (nadiren kullanılır)
ch '0' (sıfır) genişliğine göre
geri* Kök öğenin yazı tipi boyutuna göre
vw Görünüm alanının genişliğinin %1'ine göre*
vh Görüntü alanının yüksekliğinin %1'ine göre*
dk Görünüm alanının* daha küçük boyutunun %1'ine göre
vmax Görünüm alanının* daha büyük boyutunun %1'ine göre
% Ana öğeye göre

1.Px (Piksel)

Pixel, 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), baskı ortamında bir inçin 1/96'sı olarak tanımlanır.

Ancak bilgisayar ekranlarında bunlar genellikle sandığınız gibi santimetre ve inç gibi gerçek ölçümlerle ilgili değildir; sadece küçük ama görünür olarak tanımlanırlar. Görünür olarak kabul edilenler cihaza bağlıdır.



Farklı cihazların ekranlarında piksel yoğunluğu olarak bilinen inç başına farklı sayıda piksel bulunur. 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.

İşte burada cihaz piksel oranı devreye giriyor. Esasen bu, bir CSS pikselinin (1 piksel) cihazın ekranında ne kadar yer kaplayacağını hesaplamanın bir yoludur ve bu, başka bir cihazla karşılaştırıldığında aynı boyutta görünmesini sağlar.



Aşağıda bir örnek: -

<div class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! Officiis praesentium officia, nemo veniam consequatur 
         nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor 
         sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus 
         amet possimus iure impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div> 
.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

çıktı

web içeriği boyutunda piksel-css-ölçüm birimi

Üst kutu, dizüstü bilgisayar gibi daha büyük bir ekranda görüntülendiğinde nasıl göründüğü ve alt kutu nasıl göründüğüdür 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 bu şekilde çalışır. Web içeriğinin (yalnızca metin değil) cihazlarda aynı boyutta görünmesine yardımcı olur.

Windows'tan linux'a uzak masaüstü

2. Ben (E)

Ç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 taban olarak kullanır. Üst öğeden devralı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 üst div'iniz var. Bu div'de bir paragraf öğesi oluşturur ve ona 1em yazı tipi boyutu verirseniz, paragraf yazı tipi boyutu 16 piksel olur.

Ancak, başka bir paragrafa 2em yazı tipi boyutu verirseniz, 32 piksele çevrilecektir. Aşağıdaki örneği düşünün:

   <div class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div> 
.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

çıktı

em css ölçü biriminde boyutlandırılmış web içeriği

Metnin boyutunu nasıl büyütebileceğini ve üst kapsayıcıdan devralınan geçerli yazı tipi boyutundan nasıl etkilendiğini görebilirsiniz. Özellikle karmaşık yapılı sayfalarda em kullanılması tavsiye edilmez.

Düzgün kullanılmazsa, öğelerin DOM ağacındaki karmaşık bir boyut mirasına dayalı olarak doğru şekilde boyutlandırılamadığı ölçekleme sorunlarıyla karşılaşabilirsiniz.

3. Rem (Kök Em)

Rem, em ile hemen hemen aynı şekilde çalışır, ancak temel fark, rem'in üst öğenin yazı tipi boyutundan ziyade yalnızca sayfadaki kök öğenin yazı tipi boyutunu referans almasıdır. Kök yazı tipi boyutu, kullanıcı tarafından tarayıcı ayarlarında veya geliştirici olarak siz tarafından belirtilen varsayılan yazı tipi boyutudur.

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

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

   <div class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div> 
.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

çıktı

rem css ölçü birimi cinsinden boyutlandırılmış web içeriği

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

Px vs. Em vs. Rem: Hangi Birim En İyisi?

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