Единицы vw и vh в CSS

Единицы vw и vh позволяют задать размер относительно области просмотра окна браузера. Давайте посмотрим на примере.

Пусть у нас есть некоторый див:

<div></div>

Давайте зададим ему ширину в половину ширины области просмотра и высоту в половину высоты области просмотра:

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

Посмотрим, что у нас получится:

Дан див. Задайте ему отступ сверху, равный 30% высоты области просмотра.

Дан див. Задайте ему ширину и высоту, равную 70% ширины области просмотра.