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:

html<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:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

Elde ettiğimiz sonuca bakalım:

Задание 1

Bir div verilmiştir. Üstten, görüntü alanı yüksekliğinin 30%'si kadar boşluk verin.

Задание 2

Bir div verilmiştir. Genişlik ve yüksekliğini, görüntü alanı genişliğinin 70%'si kadar ayarlayın.