Hoje em dia, quase todas as pessoas acedem à internet através do telemóvel.
Por isso, é essencial que as páginas web se adaptem automaticamente a diferentes tamanhos de ecrã.

Essa adaptação é feita com CSS Responsivo, através de uma técnica chamada Media Queries.
Com ela, podes definir regras de estilo diferentes consoante o tamanho do ecrã.

Exemplo de estrutura inicial

Ficheiro estilos.css

O que está a acontecer?

• Quando o ecrã é largo (computador), as três colunas aparecem lado a lado.
• Quando o ecrã é pequeno (telemóvel), as colunas ficam uma por cima da outra.
• A media query @media (max-width: 768px) aplica os estilos apenas se a largura do ecrã for igual ou inferior a 768px.

Dica

• Testa o comportamento da página no navegador diminuindo a janela.

• Podes criar media queries adicionais, por exemplo:

• Usa percentagens ou unidades relativas (como vw, vh, em) para facilitar o ajuste automático.