Media queries

Se você já acessou um site no celular e depois viu o mesmo site no computador com um layout totalmente adaptado, você presenciou a mágica do Design Responsivo (RWD). Essa não é uma tarefa simples, mas é construída sobre um tripé de conceitos fundamentais que garantem a flexibilidade e a adaptabilidade.

O Tripé do Design Responsivo

Para que um site seja verdadeiramente responsivo, ele precisa se apoiar em três pilares que trabalham em conjunto:

1. Layouts Fluídos: Estruturas que se esticam e encolhem graciosamente com o tamanho da tela.
2. Mídias Fluídas: Imagens e vídeos que se redimensionam para caber no layout fluído.
3. Media Queries: O cérebro da operação, que aplica regras CSS específicas com base nas características do dispositivo.

Vamos explorar cada um deles.

Pilar 1: Construindo a Base com Layouts Fluídos

Antes, era comum criar sites com larguras fixas, como width: 960px. Isso funcionava bem em monitores de desktop da época, mas em uma tela de celular, criaria uma barra de rolagem horizontal terrível. Em um monitor gigante, deixaria um espaço vazio enorme.

Um layout fluído resolve isso. Em vez de usar pixels fixos, ele usa unidades relativas que se adaptam ao espaço disponível.

• Porcentagem (%): É a unidade fluída por excelência para larguras. Quando você define width: 70%, o elemento ocupará 70% da largura do seu elemento pai. Se o pai encolher (como a janela do navegador), o filho encolherá junto.
• REM (root em): É uma unidade escalável, ideal para font-size, padding e margin. Seu valor é relativo ao tamanho da fonte do elemento raiz da página (<html>). Isso significa que se o usuário aumentar o tamanho da fonte padrão no navegador por questões de acessibilidade, todo o seu layout que usa rem se ajustará proporcionalmente, mantendo a harmonia visual.

Pilar 2: Garantindo Mídias Fluídas

De nada adianta um layout fluído se uma imagem de largura fixa o “quebra”. Imagens e vídeos também precisam ser flexíveis.

A solução mais simples e eficaz é usar a propriedade max-width no CSS:

img, video {
  max-width: 100%;
  height: auto; /* Boa prática para manter a proporção da imagem */
}

Isso diz ao navegador: “A mídia pode ter seu tamanho original, mas nunca deve ser mais larga que o contêiner em que está”. Simples e poderoso.

Pilar 3: Adaptando com Media Queries

Agora que temos uma base fluída, podemos usar as Media Queries para fazer ajustes finos e grandes mudanças no layout. Elas são essencialmente declarações “se” para o seu CSS, aplicando estilos apenas quando certas condições são atendidas.

A sintaxe básica é:

@media (media-feature: value) {
  /* Seus estilos CSS aqui, que serão aplicados se a condição for verdadeira */
}

Vamos ver as media features mais comuns em ação.

1. Largura da Tela: min-width e max-width

Esta é a aplicação mais famosa. Você pode definir “pontos de quebra” (breakpoints) para alterar o layout.

• max-width (Mobile-Last): Aplica estilos quando a tela é menor ou igual a uma certa largura. Perfeito para adaptar um design feito para desktop para telas menores.

/* Por padrão, o layout é em linha */
main {
    display: flex;
}

/* Para telas com largura MÁXIMA de 568px, mude para coluna */
@media (max-width: 568px) {
    main {
    flex-direction: column; /* Empilha os itens verticalmente */
    }
}

• min-width (Mobile-First): Aplica estilos quando a tela é maior ou igual a uma certa largura. Essa é a abordagem mais recomendada: comece com o estilo base para celulares e adicione complexidade para telas maiores.

/* Por padrão, o layout é em colunas */
main {
    display: flex;
    flex-direction: column;
}

/* Para telas com largura MÍNIMA de 768px */
@media (min-width: 768px) {
    main {
    flex-direction: row; /* Coloca os itens um ao lado do outro */
    }
}

2. Orientação do Dispositivo: orientation

E se você quiser que seu site se comporte de maneira diferente quando o usuário vira o celular de lado? A feature orientation resolve isso.

• portrait: A altura é maior que a largura.
• landscape: A largura é maior que a altura.

@media (orientation: landscape) {
  .hero-banner {
    justify-content: center; /* No modo paisagem, centraliza o conteúdo */
  }
}

3. Preferências do Usuário: prefers-color-scheme

Uma feature moderna e focada na experiência do usuário é a prefers-color-scheme. Ela detecta se o usuário ativou o modo escuro (Dark Mode) em seu sistema operacional e adapta seu site a isso.

/* Estilos padrão (Light Mode) */
body {
  background-color: white;
  color: black;
}

/* Estilos que sobrescrevem os padrões se o usuário preferir o modo escuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eeeeee;
  }
}

A Peça Final: A Meta Tag viewport

Você pode ter o melhor CSS do mundo, mas ele não funcionará corretamente em celulares sem esta linha crucial no <head> do seu HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Por quê? Sem essa tag, os navegadores de celular fingem ter uma tela larga (ex: 980px) e dão zoom out na página para tudo caber, resultando em textos minúsculos. Esta tag corrige isso:

• width=device-width: Diz ao navegador para assumir a largura real do dispositivo.
• initial-scale=1.0: Define o nível de zoom inicial para 100%.

Conclusão

Dominar o Design Responsivo é entender como os três pilares se conectam. Lembre-se: um bom layout fluído é a base, as mídias fluídas garantem que o conteúdo de mídia se ajuste, e as Media Queries são o toque final que orquestra a adaptação para cada contexto.

Comece sempre com uma base fluída, adicione a meta tag viewport e use as Media Queries para aprimorar a experiência em diferentes telas. Seus usuários agradecerão!