EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Layout Responsivo CSS

Imagens Responsivas

Imagem Responsiva Básica

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

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");
  }
}

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

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

Testando Layouts Responsivos

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

❓ Perguntas Frequentes

Q Como tornar imagens responsivas?
R Básico: `img { max-width: 100%; height: auto; }` garante que imagens não transbordem. Avançado: use `` e `` para carregar diferentes resoluções em diferentes tamanhos de tela. Versão básica é suficiente para maioria dos casos.
Q 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.
Q 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

📝 Exercícios

  1. 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.
  2. Use breakpoints min-width para mudar um grid de cards de 1 coluna para 4 colunas, observando em cada breakpoint.
  3. Crie uma página de tabela responsiva onde tabelas podem rolar horizontalmente em telas pequenas (usando overflow-x: auto).
100%