vw, vh e unidades percentuais

Unidades de viewport e porcentagens parecem “relativas”, mas respondem a perguntas diferentes.

vw e vh

• 1vw = 1% da largura do viewport
• 1vh = 1% da altura do viewport

Em viewport de 1440px de largura:

.hero {
  padding-inline: 5vw; /* 72px */
}

Unidades de viewport servem para:

• Padding e gaps horizontais fluidos
• Seções full-bleed que escalam com a largura da tela
• Tipografia de hero combinada com clamp()

Fique atento a:

• UI do navegador mobile alterando a altura efetiva do viewport
• Viewports muito pequenos gerando valores minúsculos ou enormes se usados sozinhos
• Acessibilidade: texto só em vw pode ficar pequeno demais em telas estreitas

Unidades percentuais

50% é relativo ao bloco contenedor, nem sempre ao viewport.

.sidebar {
  width: 30%;
}

.card-title {
  font-size: 120%; /* relativo ao font-size do pai */
}

Porcentagens servem para:

• Layout de colunas dentro de um container conhecido
• Imagens e mídia que devem preencher a largura do pai
• Escala de tipografia aninhada

O mesmo % pode significar largura da caixa pai ou font-size do texto pai, conforme a propriedade.

vw vs %

Pergunta	Unidade melhor
Escalar com a largura da tela globalmente	vw
Preencher um container pai	%
Tipografia com limites mín/máx	clamp() com rem + vw
Coluna de grid dentro de um card	% ou unidades fr

Combine viewport com limites

Padrão responsivo comum:

.section-title {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

Só vw no corpo do texto costuma ser agressivo demais. clamp() adiciona piso e teto.

Resumo

Use vw/vh quando o viewport é a referência. Use % quando a caixa pai ou o font-size do pai é a referência. Para tipografia, combine vw com rem via clamp().

Visualize como valores em px viram vw em larguras de viewport diferentes no Conversor de unidades CSS / Gerador clamp.