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

Fundamentos do CSS Responsivo

Design responsivo faz páginas web ficarem bonitas em todos os dispositivos — desde telefones celulares até monitores desktop.

Tag Meta Viewport

Tag obrigatória para design responsivo:

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

Sem esta tag, navegadores mobile renderizam páginas em largura desktop (geralmente 980px) e encolhem para caber — texto se torna ilegível.

Media Queries

Aplicam estilos diferentes em diferentes tamanhos de tela:

Exemplo

HTML 
<style>
.box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Mobile: coluna única */
@media (max-width: 576px) {
  .box { background: #e74c3c; }
}

/* Tablet: duas colunas */
@media (min-width: 577px) and (max-width: 992px) {
  .box { background: #f39c12; }
}

/* Desktop: três colunas */
@media (min-width: 993px) {
  .box { background: #2ecc71; }
}
</style>
<div class="box">Caixa responsiva — redimensione o navegador para ver mudança de cor</div>
▶ Experimente

Unidades Relativas

Unidade Referência Melhor Para
% Elemento pai Larguras de contêiner
em Tamanho da fonte pai Preenchimento, margens
rem Tamanho da fonte raiz Tamanhos de fonte
vw Largura do viewport Elementos de largura total
vh Altura do viewport Seções de tela cheia

Exemplo

HTML 
<style>
.rem-demo {
  font-size: 1.2rem;  /* Relativo à raiz */
}
.vw-demo {
  width: 80vw;        /* 80% da largura do viewport */
}
</style>
<div class="rem-demo">Texto usando unidades rem</div>
<div class="vw-demo">80% da largura do viewport</div>
▶ Experimente

Abordagem Mobile-First

Projete para mobile primeiro, depois melhore para telas maiores:

CSS 
/* Estilos base (mobile) */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Imagens Flexíveis

Torne imagens responsivas:

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

❓ Perguntas Frequentes

Q O que acontece sem a tag meta viewport?
R Navegadores mobile renderizam em largura desktop (geralmente 980px), depois encolhem para caber na tela do telefone. Texto se torna ilegível, requerendo pinch-zoom. A tag meta viewport é a base do design responsivo.
Q Como escolher breakpoints de media query?
R Escreva estilos mobile primeiro (mobile-first), depois melhore com min-width. Breakpoints comuns: mobile < 576px, tablet 768px, laptop 992px, desktop 1200px. Não se restrinja a esses números — escolha breakpoints baseados em seu conteúdo real.
Q Design responsivo deve usar rem?
R Não necessariamente. `rem` serve para tamanhos de fonte; dimensões de layout usam %, fr, vw/vh. A chave é não usar px fixo para tamanhos de layout. Tamanhos de fonte: rem; contêineres: %; espaçamento: em ou rem.

📖 Resumo

📝 Exercícios

  1. Crie uma página: três colunas no desktop, duas no tablet, uma no mobile (usando media queries).
  2. Defina tamanhos de fonte com rem, depois modifique font-size raiz em media query para ver escala proporcional.
  3. Crie uma barra de navegação responsiva: horizontal no desktop, oculta (ou hambúrguer) no mobile.
  4. Defina max-width: 100% em imagens, redimensione o navegador para ver comportamento responsivo.
100%