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

Sıradaki ders: em ve rem

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler