Unidades vw e vh em CSS
As unidades vw
e vh
permitem definir
o tamanho em relação à área de visualização da janela
do navegador. Vamos ver um exemplo.
Suponha que temos uma div:
<div></div>
Vamos definir uma largura igual à metade da largura da área de visualização e uma altura igual à metade da altura da área de visualização:
div {
width: 50vw;
height: 50vh;
margin: 30px auto;
border: 1px solid red;
}
Vejamos o resultado:
É dada uma div. Defina um espaçamento superior igual a
30%
da altura da área de visualização.
É dada uma div. Defina uma largura e altura iguais a
70%
da largura da área de visualização.