vw ve vh

Görünüm alanı birimlerini öğrenirsin.

Görünüm alanı nedir?

Görünüm alanı (viewport), tarayıcı penceresinin görünen kısmıdır. CSS bu alanı ölçmek için vw ve vh birimlerini sunar.

1vw görünüm alanı genişliğinin yüzde biri, 1vh ise yüksekliğin yüzde biridir. Pencere küçüldükçe bu değerler de küçülür; bu yüzden tam ekran bölümler için idealdir.

vh birimi

vh görünüm alanı yüksekliğine bağlıdır. Bir .hero bölümü için height: 100vh yazarsan, bölüm pencerenin tüm yüksekliğini boydan boya kaplar.

Mobil tarayıcılarda adres çubuğu pencere yüksekliğini değiştirebileceği için 100vh yerine dvh (dynamic viewport height) de tercih edilir; ama temel kullanım için vh yeterlidir.

vw ve % farkı

vw görünüm alanına, % ise ebeveyne bağlıdır. Bir .box için width: 50% ebeveynin yarısı, width: 50vw ise pencerenin yarısıdır.

Ebeveyn daraldığında yüzde de daralır ama vw her zaman pencereye bağlı kalır. Bu fark, yerleşimin ekranı mı yoksa kapsayıcıyı mı izleyeceğini belirler.

Uygulama Hero bölümü için vw ve vh

Bir .hero seçicisi yaz. Genişliği 100vw, yüksekliği 80vh olarak ata.

Örnek çözümü göster

/* hero bölümünü ekle */
.hero {
  width: 100vw;
  height: 80vh;
}

Kendini test et

1vw ne anlama gelir?
```
/* vw pencere genişliğine bağlıdır */
```
- Görünüm alanı genişliğinin yüzde biri
- Ebeveynin yazı boyutunun yüzde biri
- Bir piksel
- Kök yazı boyutunun yüzde biri
Cevabı göster

Görünüm alanı genişliğinin yüzde biri — Doğru. 1vw, görünüm alanı genişliğinin yüzde biridir.

Tam ekran yükseklik

.hero {
  height: ____vh;
}

Cevabı göster

.hero {
  height: 100vh;
}

Birim-anlam eşle

vw

Görünüm alanı genişliği
vh

Görünüm alanı yüksekliği
%

Ebeveyn genişliği
rem

Kök yazı boyutu

Sıradaki ders: calc() fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler