EasyCode365EasyCode365

Introdução ao design responsivo e media queries

O design responsivo ajuda páginas web a funcionarem em muitos tamanhos de tela.

As pessoas podem visitar a mesma página em um celular, tablet, laptop ou monitor grande. Seu layout deve se adaptar para que a página continue legível e fácil de usar.

Por que o design responsivo importa

Um layout com largura fixa pode ficar bom em um laptop, mas quebrar em um celular.

Por exemplo, uma página com 1200px de largura pode transbordar em uma tela pequena e forçar o usuário a rolar horizontalmente.

O design responsivo ajuda a evitar esse problema.

Boas páginas responsivas geralmente têm:

  • texto legível
  • botões fáceis de tocar
  • layouts que cabem na tela
  • imagens que não transbordam seus contêineres

O que design responsivo significa

Design responsivo significa escrever CSS que se ajusta a diferentes tamanhos de tela.

A página não precisa de uma versão completamente diferente para cada dispositivo. Em vez disso, o mesmo HTML pode mudar seu layout conforme o espaço disponível muda.

Um layout responsivo simples pode:

  • mostrar cards em uma coluna em celulares
  • mostrar duas colunas em tablets
  • mostrar três colunas em desktops

O que é uma media query

Uma media query é uma regra CSS que aplica estilos apenas quando uma condição é verdadeira.

Esta é a sintaxe básica:

Somente leitura

Em palavras simples, isso significa:

Se a tela tiver pelo menos 768px de largura, defina .card como width: 50%.

Se a tela for mais estreita que 768px, o navegador ignora os estilos dentro dessa media query.

Design mobile-first

Mobile-first significa escrever primeiro os estilos para telas pequenas.

Esses estilos padrão não precisam de uma media query.

Depois, você adiciona media queries com min-width para telas mais largas.

Somente leitura

Neste exemplo, os cards ficam empilhados por padrão. Em 768px e mais largo, eles viram duas colunas.

Breakpoints

Um breakpoint é uma largura de tela em que o layout muda.

Pontos de partida comuns são:

  • celulares: estilos padrão
  • tablets: por volta de 768px
  • desktops: por volta de 1024px

Esses números não são regras rígidas.

Adicione um breakpoint quando seu layout precisar. Se a página começar a parecer apertada, esticada ou difícil de ler, isso é um bom sinal de que um breakpoint pode ajudar.

Usando min-width

A condição min-width significa “a partir desta largura e maior”.

Somente leitura

Essa regra se aplica apenas quando a tela tem 1024px de largura ou mais.

min-width funciona bem para CSS mobile-first porque você começa simples e adiciona mais layout apenas quando há espaço suficiente.

Usando max-width

A condição max-width significa “até esta largura”.

Somente leitura

Essa regra se aplica apenas quando a tela tem 500px de largura ou menos.

max-width é útil às vezes, mas iniciantes geralmente acham min-width mais fácil para layouts mobile-first.

Exemplo de layout responsivo

Este exemplo mostra o mesmo HTML e CSS dentro de duas larguras de tela simuladas.

O primeiro frame é estreito como um celular. O segundo frame é mais largo, como um tablet pequeno ou uma tela maior.

A demonstração usa breakpoints menores que um layout real de página inteira para que as mudanças sejam visíveis dentro da área de preview da aula.

Somente leitura
<div class="screen-demo">
  <div class="screen-panel">
    <p>Largura mobile: 320px</p>
    <iframe
      title="Prévia de layout mobile"
      class="phone-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Recurso 1</div>
        <div class='card'>Recurso 2</div>
      </div>"
    ></iframe>
  </div>

  <div class="screen-panel">
    <p>Largura tablet: 480px</p>
    <iframe
      title="Prévia de layout em tablet"
      class="tablet-frame"
      srcdoc="<style>
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }

        .features {
          display: grid;
          gap: 16px;
          padding: 12px;
        }

        .card {
          padding: 24px;
          text-align: center;
          background-color: #dbeafe;
          border: 1px solid #2563eb;
        }

        @media (min-width: 400px) {
          .features {
            grid-template-columns: 1fr 1fr;
          }
        }

      </style>

      <div class='features'>
        <div class='card'>Recurso 1</div>
        <div class='card'>Recurso 2</div>
      </div>"
    ></iframe>
  </div>
</div>

<style>
  .screen-demo {
    display: grid;
    gap: 16px;
    font-family: Arial, sans-serif;
  }

  .screen-panel {
    overflow-x: auto;
  }

  .screen-panel p {
    margin: 0 0 8px;
    font-weight: bold;
  }

  iframe {
    height: 180px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: white;
  }

  .phone-frame {
    width: 320px;
  }

  .tablet-frame {
    width: 480px;
  }
</style>

No frame de 320px, os cards ficam empilhados em uma coluna porque nenhuma media query corresponde ainda.

No frame de 480px, a query min-width: 400px corresponde, então os cards mudam para duas colunas.

Tornando imagens responsivas

Imagens grandes podem transbordar contêineres estreitos.

Esta pequena regra ajuda as imagens a caberem dentro do contêiner pai:

Somente leitura

max-width: 100% impede que a imagem fique mais larga que seu contêiner.

height: auto mantém as proporções corretas da imagem quando ela diminui.

Erros comuns de iniciantes

  • Usar larguras fixas em pixels para a página inteira: um contêiner de 1200px pode transbordar em celulares. Use larguras flexíveis ou max-width para contêineres grandes.
  • Escrever primeiro estilos de desktop: geralmente é mais difícil desfazer um layout complexo de desktop para mobile do que começar simples e adicionar layouts maiores depois.
  • Adicionar breakpoints demais: não escreva uma media query para cada dispositivo. Adicione um breakpoint quando o layout realmente precisar.
  • Esquecer de testar telas estreitas: diminua a largura da janela do navegador e verifique se texto, botões e layout ainda cabem.

Mini prática

Escreva uma media query com min-width que mude .menu de uma coluna para duas colunas em 768px.

Use:

Somente leitura

Quiz curto com respostas

  1. Com o que o design responsivo ajuda?
  2. O que min-width: 768px significa?
  3. Por que max-width: 100% é útil para imagens?

Respostas:

  1. Ajuda as páginas a continuarem legíveis e usáveis em diferentes tamanhos de tela.
  2. Os estilos se aplicam quando a tela tem 768px de largura ou mais.
  3. Impede que imagens transbordem seus contêineres pai.

Resposta da mini prática:

Somente leitura

Pequeno desafio

Tente criar um grid responsivo de produtos.

  1. Transforme .product-grid em um grid.
  2. Adicione um gap de 16px.
  3. Mantenha uma coluna por padrão.
  4. Em 400px, mude para duas colunas.
  5. Em 600px, mude para três colunas.
Editável
<div class="product-grid">
  <div class="item">Produto A</div>
  <div class="item">Produto B</div>
  <div class="item">Produto C</div>
  <div class="item">Produto D</div>
  <div class="item">Produto E</div>
  <div class="item">Produto F</div>
</div>

<style>
  .item {
    padding: 30px;
    text-align: center;
    font-family: Arial, sans-serif;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .product-grid {
    /* 1. Transforme isto em um grid */

    /* 2. Adicione um gap de 16px */

    /* 3. Uma coluna é o padrão, então nenhuma regra de coluna é necessária */
  }

  /* 4. Em 400px, use duas colunas */
  @media (min-width: 400px) {
    .product-grid {
    }
  }

  /* 5. Em 600px, use três colunas */
  @media (min-width: 600px) {
    .product-grid {
    }
  }
</style>

Uma resposta possível:

Somente leitura

Resumo

  • O design responsivo ajuda páginas a se adaptarem a diferentes tamanhos de tela.
  • Media queries aplicam CSS apenas quando uma condição é verdadeira.
  • CSS mobile-first começa com estilos para telas pequenas.
  • min-width aplica estilos a partir de um breakpoint e acima.
  • max-width aplica estilos até um breakpoint.
  • Breakpoints devem se basear nas necessidades do layout.
  • Imagens responsivas usam max-width: 100% e height: auto.