Design Responsivo com Media Queries: Faça o seu Site Ficar Perfeito no Telemóvel
O nosso site está incrível no computador. Está bonito, animado, interativo. Mas e se eu te dissesse que mais de metade dos teus visitantes provavelmente o verão num ecrã de telemóvel? Se o site não se adaptar, a experiência será péssima, com textos minúsculos e a necessidade de fazer zoom e arrastar a página para os lados.
Hoje, vamos aprender a técnica essencial do desenvolvimento web moderno: o Design Responsivo. Vou mostrar-vos como usar as "Media Queries" do CSS para aplicar estilos diferentes dependendo do tamanho do ecrã, garantindo que o nosso site seja bonito e funcional em qualquer dispositivo, do telemóvel ao ecrã gigante.
Parte 1: A Meta Tag Mais Importante de Todas (viewport)
Antes de escrevermos uma única linha de CSS responsivo, temos que fazer uma coisa. Os navegadores de telemóvel, por padrão, fingem que são um ecrã de computador e depois diminuem o zoom da página. Temos que os impedir de fazer isso.
Adicionem a seguinte linha de código dentro da tag <head> de TODOS os vossos ficheiros HTML. É obrigatório!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esta linha diz ao navegador do telemóvel: "Usa a largura real do teu ecrã e não apliques nenhum zoom inicial". Sem isto, nada do que vamos fazer a seguir funciona corretamente.
Parte 2: O Que São as Media Queries?
Uma Media Query é, basicamente, um "SE" para o nosso CSS. A sintaxe é muito simples e costumamos colocá-la no final do nosso ficheiro estilos.css.
@media (max-width: 768px) {
/* TODOS os estilos que estiverem aqui dentro
SÓ serão aplicados se a largura do ecrã
for de 768 pixels OU MENOS.
*/
}
A regra de ouro é: nós escrevemos primeiro o nosso CSS para ecrãs grandes (desktop-first), e depois usamos as media queries para adaptar, simplificar e reorganizar o layout para ecrãs mais pequenos.
Parte 3: Mão na Massa! Adaptando o Nosso Layout
Vamos adicionar um bloco de media query ao fundo do nosso estilos.css e começar a adaptar o que já construímos.
/* =================================== */
/* ESTILOS RESPONSIVOS */
/* =================================== */
@media (max-width: 768px) {
/* --- Adaptando o Menu de Navegação --- */
nav li {
float: none; /* Remove o alinhamento lado a lado */
width: 100%; /* Faz cada item ocupar a largura toda */
text-align: center;
}
/* --- Adaptando os Cartões Flexbox --- */
/* O nosso layout de cartões já é bastante responsivo graças ao flex-wrap! */
/* Mas podemos, por exemplo, diminuir o tamanho do texto em ecrãs pequenos */
.card h3 {
font-size: 20px;
}
/* --- Adaptando o Layout Grid --- */
/* Esta é uma grande mudança! Em vez de 3 colunas, queremos apenas 1 */
.grid-container {
grid-template-columns: 1fr; /* Apenas uma coluna que ocupa todo o espaço */
grid-template-rows: auto auto auto auto; /* 4 linhas automáticas */
}
/* Dizemos a cada item para ocupar a nova e única coluna */
.grid-header,
.grid-main,
.grid-sidebar,
.grid-footer {
grid-column: 1 / 2;
}
}
Conclusão
Que poder! Com a meta tag viewport e a regra @media, agora temos controlo total sobre a aparência do nosso site em qualquer dispositivo. Aprendemos a reorganizar menus, adaptar o tamanho de textos e até a mudar completamente a estrutura de um layout Grid.
Ter um site responsivo não é mais uma opção, é uma obrigação. E agora, tu sabes como o fazer!
Com este conhecimento, a nossa caixa de ferramentas está completa. Cobrimos a estrutura, o layout, o design, a interatividade e a adaptabilidade. Agora, só falta uma coisa: usar tudo isto para construir um projeto real. Na próxima aula, vamos dar o pontapé de saída para o nosso Projeto Final: um site de portfólio de uma página!
Comentários
Enviar um comentário