CSS: Layout Responsivo CSS

Última atualização: 2026-10-13

Propriedades nesta seção: min-width

1. Imagens Responsivas

(1) Imagem Responsiva Básica

CSS

img {
  max-width: 100%;
  height: auto;
}

(2) Imagem de Fundo Responsiva

CSS

.banner {
  background-image: url("desktop-bg.jpg");
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .banner {
    background-image: url("mobile-bg.jpg");
  }
}

2. Tabelas Responsivas

Tabelas podem transbordar em telas pequenas. Use overflow-x: auto para rolagem horizontal:

▶ Exemplo

▶ Experimente

3. Mostrar/Ocultar Elementos

Use media queries para mostrar/ocultar elementos em diferentes breakpoints:

▶ Exemplo

▶ Experimente

4. Testando Layouts Responsivos

Redimensionar navegador: Arraste as bordas da janela do navegador
Chrome DevTools: F12 → Alternar barra de dispositivos (Ctrl+Shift+M)
Dispositivos reais: Teste em telefones/tablets reais quando possível

Propriedades nesta seção: min-width

❓ Perguntas Frequentes

P Como tornar imagens responsivas?

R Básico: img { max-width: 100%; height: auto; } garante que imagens não transbordem. Avançado: use <picture> e <source> para carregar diferentes resoluções em diferentes tamanhos de tela. Versão básica é suficiente para maioria dos casos.

P Design responsivo deve ter três versões?

R Não. Garanta a experiência mobile primeiro, depois melhore em telas maiores. Muitas páginas só precisam de versões mobile + desktop; tablet é frequentemente uma transição natural. A chave é "conteúdo primeiro, adaptação ao dispositivo" — não responsivo por responsividade.

P Como testar efeitos responsivos?

R DevTools do navegador podem simular vários tamanhos de dispositivo, mas testar em dispositivos reais é recomendado. Interações de toque são diferentes da simulação. Ferramentas online como responsinator.com também podem ajudar na pré-visualização rápida.

📖 Resumo

O núcleo do layout responsivo é "adaptação flexível"
Através de grids flexíveis (% / fr), imagens flexíveis (max-width), e media queries (@media), você pode construir páginas que funcionam bem em todas as telas
Na prática, "mobile-first" é recomendado: escreva estilos mobile primeiro, depois use min-width para adicionar progressivamente estilos para tablet e desktop

📝 Exercícios

Crie uma página de "blog pessoal responsivo" com navegação de cabeçalho, lista de artigos, recomendações da barra lateral e direitos autorais do rodapé. Requisitos: mobile coluna única, tablet duas colunas, desktop três colunas + barra lateral fixa.
Use breakpoints min-width para mudar um grid de cards de 1 coluna para 4 colunas, observando em cada breakpoint.
Crie uma página de tabela responsiva onde tabelas podem rolar horizontalmente em telas pequenas (usando overflow-x: auto).

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós