CSS'te vw ve vh Birimleri
vw ve vh birimleri, tarayıcı penceresinin
görüntü alanına göre boyut belirlemeye
izin verir. Bir örnekle inceleyelim.
Bir div elementimiz olduğunu varsayalım:
<div></div>
Ona, görüntü alanı genişliğinin yarısı kadar genişlik ve görüntü alanı yüksekliğinin yarısı kadar yükseklik verelim:
div {
width: 50vw;
height: 50vh;
margin: 30px auto;
border: 1px solid red;
}
Elde ettiğimiz sonuca bakalım:
Bir div verilmiştir. Üstten, görüntü alanı yüksekliğinin
30%'si kadar boşluk verin.
Bir div verilmiştir. Genişlik ve yüksekliğini, görüntü alanı genişliğinin
70%'si kadar ayarlayın.