não entendi se existe diferença entre as duas unidades
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
não entendi se existe diferença entre as duas unidades
Oi Rafael, tudo bem?
As unidades vh e vw significam viewport, sendo a primeira para altura e a segunda para largura. Isso significa que elas utilizam o tamanho total da viewport (tamanho do nosso dispositivo), ou seja, uma altura de 100vh corresponde a 100% da página total, do nosso corpo do documento (body).
Já a porcentagem ( % ) são unidades relativas ao elemento ancestral mais próximo. Mas o que isso quer dizer? Veja um exemplo abaixo:
<div>
<img src="banner.jpg/>
</div>Se colocarmos a largura dessa imagem para 100%, significa que ela ocupará 100% do espaço disponível. Isso significa que se a nossa div ter 200px, a imagem ocupará 200px de largura (100%).
Mas agora, se colocarmos a largura da imagem para 100vw (medida da viewport), independente de qual será o tamanho da nossa div, a imagem ocupará toda a nossa tela, pois a viewport significa toda a página. Deu para entender?
Espero ter ajudado, qualquer outra dúvida só me retornar! Abraços e bons estudos!