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