CSS: Fundamentos do CSS Responsivo

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

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

Propriedades nesta seção: font-size

1. 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.

2. Media Queries

Aplicam estilos diferentes em diferentes tamanhos de tela:

▶ Exemplo

▶ Experimente

3. 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

▶ Experimente

4. 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;
  }
}

5. Imagens Flexíveis

Torne imagens responsivas:

CSS

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

Propriedades nesta seção: font-size

❓ Perguntas Frequentes

P 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.

P 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.

P 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

O núcleo do design responsivo é "adaptação flexível" — use unidades relativas, media queries e imagens flexíveis
Lembre-se de três passos: adicione meta viewport, use unidades relativas, aplique media queries em breakpoints
Mobile-first é recomendado — projete para telas menores primeiro, depois melhore

📝 Exercícios

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

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