Carregando...
HTML responsivo
Após o layout, responsivo: o mesmo URL no telemóvel e no desktop. HTML começa com viewport; CSS termina.
Um URL, muitas larguras
Sem HTML móvel separado. O hábito de 1200px causa scroll horizontal.
Resposta direta
1) meta viewport. 2) larguras fluidas. 3) img max-width:100%. Media queries são tema de CSS.
📊 HTML unlocks vs CSS responsive tools
| Layer | Job for responsiveness | Examples |
|---|---|---|
| HTML viewport | Tell mobile browsers how to size the layout viewport | meta name="viewport" with width=device-width |
| HTML structure | Keep landmarks and flexible wrappers that can reflow | header, main, aside, div.row (from layout) |
| CSS fluid sizing | Let boxes and images shrink instead of overflow | max-width, %, height: auto |
| CSS adaptation | Change columns and spacing at breakpoints | media queries, flex/grid tweaks (CSS courses) |
| Avoid | Huge fixed pixels and layout tables fighting narrow screens | width="1200", whole-page table chrome |
Meta viewport — peça HTML essencial
Sem ela muitos telemóveis encolhem um canvas de desktop — texto minúsculo.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>
Ler a linha viewport
- name=viewport é o interruptor
- width=device-width = largura do dispositivo
- initial-scale=1.0 = 100%
- CSS ainda é preciso
Imagens fluidas — marca HTML + escala CSS
img com alt; a escala é CSS.
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">
Ler a regra fluida
- max-width:100%
- height:auto mantém a proporção
- width=1200 transborda no telemóvel
HTML desbloqueia; CSS termina
Viewport e estrutura flexível = HTML. Colunas fluidas e breakpoints = CSS.
Prática — laboratório de redimensionar
- Adicione viewport
- Imagem larga + CSS fluido
- Estreite a janela
- Teste width=1200 um momento
Erros fáceis
- esquecer viewport
- médias fixas 1200px
- mito só HTML
- tabelas de layout
Resumo
- viewport é essencial
- imagens fluidas ajudam
- HTML + CSS
- a seguir: formulários
🧠 Teste Seu Conhecimento
Pronto para Começar
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
5
Perguntas
70%
Para Passar
∞
Tempo
∞
Tentativas
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo