CSS: Layout Responsivo CSS

Q: Como tornar imagens responsivas?

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.

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

HTML

<style>
.table-wrapper {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
</style>
<div class="table-wrapper">
  <table>
    <tr><th>Nome</th><th>Email</th><th>Telefone</th><th>Endereço</th><th>Cidade</th></tr>
    <tr><td>João</td><td>joao@email.com</td><td>123-456-7890</td><td>Rua Principal, 123</td><td>São Paulo</td></tr>
  </table>
</div>

▶ Experimente

3. Mostrar/Ocultar Elementos

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

▶ Exemplo

HTML

<style>
.desktop-only {
  display: none;
}
.mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
}
</style>
<div class="mobile-only">Conteúdo apenas para mobile</div>
<div class="desktop-only">Conteúdo apenas para desktop</div>

▶ 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

❓ 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