Aula Bónus - Laboratório Prático de Design Responsivo
Na última aula, falámos sobre a teoria do Design Responsivo e aplicámo-la ao nosso projeto. Mas, por vezes, a melhor forma de entender um conceito é isolá-lo e vê-lo a funcionar de forma clara, sem distrações.
Por isso, criei esta aula extra, a 17.1! Hoje, vamos construir uma página super simples a partir do zero com um único objetivo: ver a magia das Media Queries a acontecer em tempo real. Pensa nisto como o nosso laboratório: um ambiente controlado para experimentar e ver os resultados de forma inequívoca.
Parte 1: A Estrutura HTML - O Nosso Material de Teste
Vamos criar um único ficheiro HTML para esta experiência. Abre o teu VS Code, cria um novo ficheiro e guarda-o como laboratorio.html. Cola o seguinte código lá dentro.
<!DOCTYPE html>
<html lang="pt-MZ">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laboratório Responsivo</title>
<style>
/* O nosso CSS vai entrar aqui diretamente para simplificar */
</style>
</head>
<body>
<header>
<h1>Laboratório de Design Responsivo</h1>
</header>
<main class="container">
<div class="box">Caixa 1</div>
<div class="box">Caixa 2</div>
<div class="box">Caixa 3</div>
</main>
</body>
</html>
Parte 2: O CSS Base - Estilos para Ecrãs Grandes (Desktop First)
Agora, dentro das tags <style> no teu <head>, vamos adicionar o nosso CSS inicial. Este será o estilo para ecrãs de computador.
/* Reset Básico e Estilos Gerais */
body {
font-family: sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
/* Um indicador visual para sabermos o tamanho do ecrã */
h1::after {
content: 'Ecrã Grande (Desktop)';
display: block;
font-size: 16px;
font-weight: normal;
color: green;
margin-top: 5px;
}
/* O nosso layout para Desktop */
.container {
display: flex; /* Alinha as caixas lado a lado */
gap: 20px; /* Espaço entre as caixas */
}
.box {
flex: 1; /* Faz as 3 caixas partilharem o espaço por igual */
background-color: dodgerblue;
color: white;
padding: 30px;
border-radius: 5px;
text-align: center;
font-size: 24px;
}
Se abrires o laboratorio.html agora, vais ver três caixas azuis, lado a lado, com o indicador a dizer "Ecrã Grande (Desktop)".
Parte 3: A Magia das Media Queries - Adaptando o Layout
Agora vem a parte divertida. No final do nosso CSS (ainda dentro da tag <style>), vamos adicionar as nossas regras para ecrãs mais pequenos.
/* ========================================= */
/* Breakpoint para Ecrãs Médios (Tablets) */
/* ========================================= */
@media (max-width: 800px) {
h1::after {
content: 'Ecrã Médio (Tablet)';
color: orange;
}
.container {
flex-direction: column; /* Faz as caixas ficarem uma em cima da outra! */
}
}
/* ========================================= */
/* Breakpoint para Ecrãs Pequenos (Telemóveis) */
/* ========================================= */
@media (max-width: 500px) {
h1 {
font-size: 28px; /* Diminui o tamanho do título */
}
h1::after {
content: 'Ecrã Pequeno (Telemóvel)';
color: red;
}
.box {
padding: 20px; /* Diminui o espaçamento interno das caixas */
font-size: 20px;
}
}
Parte 4: Como Testar (A Ferramenta Essencial)
Agora que o código está pronto, como é que vemos a magia a acontecer?
Abre o teu ficheiro
laboratorio.htmlno Google Chrome.Clica com o botão direito em qualquer sítio da página e seleciona "Inspecionar" (ou prime a tecla F12). Isto abre as Ferramentas de Desenvolvedor.
No topo da janela das ferramentas, clica no ícone que parece um telemóvel e um tablet. Chama-se "Ativar/desativar barra de ferramentas do dispositivo". `
` 4. A tua página agora vai aparecer dentro de um simulador. Podes arrastar as bordas para aumentar e diminuir a largura do ecrã.
Observa o que acontece! Vais ver o indicador de texto a mudar de verde para laranja e para vermelho, e o mais importante, vais ver o layout das caixas a mudar de horizontal para vertical.
Conclusão
Agora sim, ficou claro, não ficou? Construímos uma página "camaleão" que muda a sua aparência e layout com base no tamanho do ecrã do utilizador.
Este laboratório provou o conceito fundamental: nós escrevemos um CSS base e depois usamos as @media queries para substituir ou adicionar regras específicas para diferentes tamanhos de ecrã.
Agora que vimos isto a funcionar de forma isolada e clara, estamos muito mais preparados e confiantes para aplicar este super-poder no nosso grande Projeto Final. Vamos a isso!
Comentários
Enviar um comentário