diferença de vh para %

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!