CSS Ölçü Birimleri
Doğuhan ELMA tarafından Temel İşlemler yayınlanma tarihi
99 görünüm
1. PX (Piksel)
Tanım: Ekranın bir noktasını temsil eder.
Kullanım: Genellikle sabit boyutlar için kullanılır. Örneğin, bir butonun genişliği.
Sınırlılık: Cihazın çözünürlüğüne bağlı olarak değişmez, bu yüzden responsive (duyarlı) tasarımlarda esneklik sağlamak zordur.
2. EM
Tanım: Ebeveyn (parent) elemanının font-boyutuna göre ölçülür.
Kullanım: Ebeveyn elemanın boyutuna bağlı olarak ölçeklenmek istenen durumlar için kullanılır. Örneğin, bir iç içe yapıda, iç elemanların ebeveynin font boyutuna göre oranlı olması istendiğinde.
Sınırlılık: İç içe yapılar karmaşıklaştıkça, em birimleri yönetilmesi zor bir hale gelebilir çünkü her seviyedeki ebeveyn boyutu hesaplamalara etki eder.
3. REM (Root EM)
CSS'de rem birimi, "root em" anlamına gelir ve belgenin kök (root) elementinin (genellikle <html> elementi) font boyutuna göre ölçülendirme yapar. rem birimi, responsive (duyarlı) ve erişilebilir web tasarımında yaygın olarak kullanılır. İşte rem birimini kullanmanın bazı nedenleri:
Tutarlılık: rem birimi, tüm sayfa boyunca tutarlı bir ölçeklendirme sağlar. Tüm boyutlandırmalar tek bir kök font boyutuna göre ayarlandığı için, tasarımın farklı ekran boyutlarında ve çözünürlüklerde tutarlı kalmasını kolaylaştırır.
Esneklik: Kök elementin font boyutunu değiştirerek, tüm rem değerlerini tek bir yerden güncelleyebilir ve böylece tasarımın ölçeklenmesini kolayca kontrol edebilirsiniz. Bu, responsive tasarım için özellikle yararlıdır.
Erişilebilirlik: Kullanıcılar, tarayıcı ayarlarından varsayılan font boyutlarını değiştirebilir. rem birimini kullanmak, kullanıcıların bu tercihlerine saygı duyar ve sitenizin daha erişilebilir olmasını sağlar, çünkü rem ile belirlenen boyutlar kullanıcının belirlediği kök font boyutuna göre ölçeklenir.
Bakım Kolaylığı: rem birimi, CSS kodunuzun bakımını kolaylaştırır. Örneğin, tüm kenar boşlukları ve dolgular rem cinsinden tanımlandığında, tasarımınızın ölçeklendirme mantığını değiştirmek istediğinizde yalnızca birkaç değeri güncellemeniz yeterli olur.
Pixel-Base Tasarımlardan Kaçınma: Geleneksel olarak, web tasarımcıları piksel (px) birimini kullanırlar. Ancak, piksel bazlı tasarımlar esnek ve erişilebilir olmaktan uzaktır. rem ve em gibi göreli birimler kullanarak, daha esnek ve kullanıcı dostu web siteleri oluşturabilirsiniz.
Kısacası, rem birimi, web sitelerini daha tutarlı, esnek, erişilebilir ve kolay yönetilebilir hale getirme avantajı sunar. Bu nedenlerle, modern web tasarımında rem birimi sıkça tercih edilir.
Örnek
Varsayalım ki HTML kök elemanının font boyutu 16px olarak belirlenmiş. Eğer bir div'in genişliğini 2rem olarak belirlerseniz, bu 32px (16px * 2) olacaktır. Eğer kök elemanın font boyutunu 18px olarak güncellerseniz, aynı div otomatik olarak 36px genişliğine sahip olur. Bu, tüm cihaz ve ekran boyutları için tutarlı ve esnek bir tasarım sağlar.
html { font-size: 16px; /* Bu kök font boyutunu belirler */ } .container { width: 2rem; /* 32px eşdeğerinde */ padding: 0.5rem; /* 8px eşdeğerinde */ } /* Kök font boyutu değişirse, .container otomatik olarak ölçeklenir */
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.