A medida para definir o tamanho de containers como o do Header no melhor dos casos seria a medida "vw"? ou "%"? porque com essas medidas não seria controlado o tamanho desses containers com relação ao tamanho da tela como no caso do vw?
A medida para definir o tamanho de containers como o do Header no melhor dos casos seria a medida "vw"? ou "%"? porque com essas medidas não seria controlado o tamanho desses containers com relação ao tamanho da tela como no caso do vw?
Oi, André.
A principal diferença reside na referência que cada unidade utiliza para calcular o tamanho.
A medida em % é relativa ao elemento pai direto.
header está dentro de um body que ocupa a tela toda, width: 100% ocupará a largura total.header estiver dentro de uma div que tem apenas 500px de largura, os 100% do header serão exatamente 500px.A medida vw é relativa à largura da janela do navegador (viewport), independentemente de onde o elemento esteja na estrutura do código.
100vw sempre será a largura total da janela visível.100vw dentro de uma caixa pequena, ele vai ignorar o tamanho dessa caixa e se estender por toda a tela.vw costuma incluir a largura da barra de rolagem vertical. Isso pode causar o surgimento de uma barra de rolagem horizontal indesejada em alguns sistemas operacionais, o que acaba prejudicando a experiência.Pra containers de conteúdo e cabeçalhos, o uso de porcentagem (%) costuma ser mais seguro e previsível. Mas, o segredo para um bom layout não é usar apenas uma unidade, mas combiná-las com limites.
No exemplo da aula, o instrutor usa um valor fixo que depois é alterado via Media Query. Uma alternativa muito utilizada no mercado para evitar o excesso de Media Queries em ajustes pequenos é:
.container {
width: 90%; /* Ocupa 90% da tela em dispositivos pequenos */
max-width: 1200px; /* Não ultrapassa 1200px em telas muito grandes */
margin: 0 auto; /* Centraliza o conteúdo */
}
Dessa forma, o container se torna fluido automaticamente: em um celular, ele terá margens laterais pequenas (os 10% restantes), e em um monitor ultra-wide, ele ficará centralizado com um tamanho confortável para leitura, sem que você precise criar regras para cada tamanho de tela.
| Característica | Porcentagem (%) | Viewport Width (vw) |
|---|---|---|
| Referência | Elemento pai direto | Largura total da janela |
| Barra de rolagem | Ignora a barra lateral | Pode considerar a barra e causar erro no layout |
| Uso comum | Estruturas internas, colunas e containers | Elementos que precisam ocupar a tela toda (seções de destaque) |
Para o seu Header, usar % garante que ele se mantenha dentro dos limites do site, enquanto o uso de vw poderia causar desalinhamentos difíceis de corrigir caso o conteúdo cresça verticalmente e a barra de rolagem apareça.
Espero ter ajudado.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!