Piksel ve yüzde
px ve % birimlerini öğrenirsin.
Piksel nedir?
CSS'te piksel (px) en bilinen mutlak birimdir. 16px yazdığında tarayıcı o uzunluğu sabit bir piksel olarak ele alır; ekran çözünürlüğü ya da kapsayıcı değişse de px değeri değişmez.
Yazı tipi boyutunda, kenarlık kalınlığında ve küçük aralıklarda px rahatça kullanılır. Örneğin font-size: 16px her cihazda tutarlı görünür.
Yüzde birimi
Yüzde (%) birimi kapsayıcıya göre hesaplanır. Bir .box için width: 50% yazarsan, kutu ebeveyninin genişliğinin tam olarak yarısı kadar yer kaplar.
Ebeveynin genişliği değiştikçe yüzde de değişir; bu yüzden esnek ve akışkan yerleşimlerde işe yarar. Yükseklikte ise yine ebeveynin yüksekliğine göre hesaplanır.
Mutlak ve göreceli farkı
Birimler ikiye ayrılır: mutlak birimler cihazda sabit kalır (px, pt), göreceli birimler bir bağlama göre değişir (%, em, vw).
Mutlak birimler tutarlı ama esnek değildir; küçük değişiklikte bile aynı kalırlar. Göreceli birimler tasarımı ekran boyutuna uyumlu hâle getirir; bu yüzden duyarlı tasarımda tercih edilir.
Uygulama Kutu için yüzde ve piksel birlikte
Bir .box seçicisi yaz. Genişliği 80%, iç boşluğu 16px olarak ata.
Örnek çözümü göster
/* kutu seçicisini ekle */
.box {
width: 80%;
padding: 16px;
}Kendini test et
-
Hangisi mutlak bir birimdir?
/* mutlak birim cihazda sabit kalır */- %
- px
- em
- vw
Cevabı göster
px — Doğru. px mutlak bir birimdir; ekran ya da kapsayıcı değişse de sabit kalır.
-
Genişliği yüzde ile yaz
.box { width: ____%; }Cevabı göster
.box { width: 50%; } -
Birimleri türüne eşle
- px
- Mutlak piksel birimi
- pt
- Mutlak punto birimi
- %
- Ebeveyne göreceli
- em
- Yazı boyutuna göreceli