Todo desenvolvedor já deve ter ouvido falar em unidades de medidas como px (pixels), % e ems. Para quem nunca ouviu falar, vou fazer um breve comentário sobre cada uma: o pixel é a unidade de medida mais conhecida, utilizada por diversos softwares como Word e editores gráficos como Photoshop, Corel e Illustrator. O em é uma unidade tipográfica relacionado a letra M, que são variáveis como a porcentagem. Para utlizá-la multiplicamos o tamanho normal da letra por ela, por exemplo, o tamanho das fontes do texto da página está configurado para 12px:
body {
font-size: 12px;
}
h1 {
font-size: 2em;
}
O H1 ficará com 24px, baseado em 12px * 2 = 24px. Mudando o tamanho do font-size do body, alteramos automaticamente qualquer tamanho que utilize o em.
Com o passar do tempo novas medidas foram surgindo como as Viewpots Units, medidas baseadas no viewport da tela ou dispositivo, como as vmin, vmax, vh e vw, respectivamente para valores mínimo, máximo, height (altura) e width (largura) do viewport.
Se o dispositivo possui altura de 460px, 1vh teria o valor de 4.6px. É uma proporção de 1/100. Um exemplo: quero que um elemento tenha 100% do tamanho da tela, tanto de largura quanto de altura:
#banner {
height: 100vh;
width: 100vw;
background: #F00;
}
O vmin e o vmax funcionam como o max-width/height e o min-width/height.