CSS Ölçü Birimleri: Rem, Em ve Px Ne Zaman Kullanılır?
Web geliştirmede sıkça karşılaştığımız bir konu da CSS ölçü birimleridir. Birçok farklı ölçü birimi olsa da en yaygın kullanılanları rem, em ve px’tir. Her birinin farklı kullanım alanları ve avantajları vardır. Bu yazıda, bu üç ölçü birimini daha ayrıntılı olarak ele alıp, ne zaman hangi birimini kullanmanız gerektiğini açıklayacağız.
## Pixel (px)
Pixel, en temel ölçü birimlerinden biridir. Ekran pikselleri olarak tanımlanır. Bir web sayfasında piksel kullanmanın avantajı, tasarımınızın farklı ekran boyutlarında tutarlı görünmesini sağlamasıdır. Örneğin, bir elemanın genişliğini 100 piksel olarak ayarladığınızda, bu eleman her zaman 100 piksel genişliğinde olacaktır. Ancak, piksellerin dezavantajı da vardır. Farklı ekran çözünürlüklerinde bir web sayfasının görünümünü etkileyebilir. Yüksek çözünürlüklü ekranlarda aynı piksel sayısı, düşük çözünürlüklü ekranlara göre daha büyük görünecektir.
## Em
Em, “em” birim adı, bir yazı tipinin boyutuna göre tanımlanır. Bir em, mevcut yazı tipi boyutuna eşittir. Örneğin, eğer bir elemanın yazı tipi boyutu 16 piksel ise, o elemanın 1 em genişliğinde olması 16 piksele eşit olacaktır. Em birimi, göreceli bir ölçü birimidir. Bu, yazı tipi boyutuna göre değiştiği anlamına gelir. Örneğin, bir elemanın yazı tipi boyutu 16 piksel ise, o elemanın 2 em genişliğinde olması 32 piksele eşit olacaktır.
Em birim kullanmanın bir diğer avantajı, yazı tipi boyutunu değiştirdiğinizde, elemanların boyutunun da otomatik olarak değişmesidir. Bu, web sitenizin farklı cihazlar ve ekran boyutlarında daha iyi görünmesini sağlar. Örneğin, web sitenizde yazı tipi boyutunu 16 pikselden 20 piksele değiştirirseniz, em birimleriyle tanımlanan tüm elemanlar da otomatik olarak boyutlarını %25 oranında artıracaktır.
## Rem
Rem, “root em” kısaltmasıdır. Rem, kök elemanın yazı tipi boyutuna göre tanımlanır. Kök eleman, genellikle ““ elemanıdır. Rem, em biriminden farklı olarak, kullanıcının tarayıcı ayarlarına göre de değişiklik gösterebilir. Bu, kullanıcıların web sitenizi kendi tercihlerine göre özelleştirmelerini sağlar.
Rem birimi, web sitenizin tüm elemanlarını tutarlı bir şekilde ölçeklendirmenize olanak tanır. Örneğin, bir elemanın boyutunu 1 rem olarak ayarladığınızda, o elemanın boyutu her zaman kök elemanın yazı tipi boyutuna eşit olacaktır. Bu, web sitenizin farklı cihazlar ve ekran boyutlarında daha iyi görünmesini sağlar.
## Hangi Ölçü Birimini Ne Zaman Kullanmalısınız?
Peki, hangi ölçü birimini ne zaman kullanmalısınız? İşte bazı genel kurallar:
* **Px:** Tasarımınızın piksel tabanlı bir şekilde tam kontrolünü sağlamak istediğinizde piksel kullanın. Örneğin, bir logo veya bir görselin boyutunu tam olarak belirlemek istediğinizde piksel kullanabilirsiniz.
* **Em:** Yazı tipi boyutuna göre göreceli olarak boyutlandırılmasını istediğiniz elemanlar için em birimi kullanın. Örneğin, bir metin bloğunun yazı tipi boyutuna göre genişliğini ayarlamak istediğinizde em birimi kullanabilirsiniz.
* **Rem:** Web sitenizin tüm elemanlarının kök elemanın yazı tipi boyutuna göre boyutlandırılmasını istediğinizde rem birimi kullanın. Örneğin, bir web sitenizin ana yazı tipi boyutunu değiştirdiğinizde, tüm elemanların da otomatik olarak boyutlarını değiştirmesini istediğinizde rem birimi kullanabilirsiniz.
## Örnekler
İşte bazı örnekler:
“`html
“`
Yukarıdaki örnekte, logo elemanının genişliği ve yüksekliği piksel olarak tanımlanmıştır. Paragraph elemanının yazı tipi boyutu ve satır yüksekliği em birimleriyle tanımlanmıştır. Body elemanının yazı tipi boyutu ve main-container elemanının genişliği ve kenar boşluğu rem birimleriyle tanımlanmıştır.
## Sonuç
CSS ölçü birimleri, web sitenizi daha iyi bir şekilde kontrol etmenizi sağlar. Piksel, em ve rem birimlerini doğru şekilde kullanmak, web sitenizin farklı cihazlar ve ekran boyutlarında daha iyi görünmesini sağlar. Hangi ölçü birimini kullanacağınıza karar vermeden önce tasarımınızın ihtiyaçlarını ve özellikleri göz önünde bulundurmanız önemlidir.
## İpuçları
* Web sitenizde tutarlı bir ölçü birimi kullanmaya çalışın.
* Tasarımınızın farklı cihazlar ve ekran boyutlarında nasıl göründüğünü test edin.
* Bir ölçü birimini seçerken, web sitenizin hedef kitlesini ve kullanıcıların tercihlerini göz önünde bulundurun.
## Kaynaklar
* [CSS Units of Measurement: When Do You Use Rem vs. Em vs. Px?](https://dev.to/bridgettguzik09d/css-units-of-measurement-when-do-you-use-rem-vs-em-vs-px-4oh2)
* [CSS Units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#css_units)
## #Etiketler
#CSS #ÖlçüBirimleri #Rem #Em #Px #WebGeliştirme #Tasarım #FatihSoysal #fatihsoysal.com