Sempre pense de forma responsiva: o guia básico sobre responsividade

Design responsivo é a prática de criar páginas web que se adaptam a qualquer tamanho de tela, do monitor grande ao smartphone. Sempre que criamos uma página, precisamos ter total certeza de como ela vai se comportar em diferentes dispositivos, e é exatamente esse o poder de pensar de forma responsiva.

Eu costumo repetir uma frase para fixar na memória de quem desenvolve: ao criar qualquer página web, sempre pense de forma responsiva. Em outras palavras, parta do princípio de que o usuário vai consumir a sua página em telas de tamanhos muito diferentes.

Se a sua aplicação parece ótima em monitores, mas não funciona bem em smartphones, é sinal de que você não pensou de forma responsiva. Neste artigo, vamos falar sobre o básico da responsividade, que você pode começar a aplicar em qualquer página web.

O que é design responsivo

O termo design responsivo foi definido originalmente por Ethan Marcotte, em um artigo publicado na revista A List Apart. A ideia central é que o mesmo HTML se reorganize conforme o espaço disponível, em vez de existir uma versão separada para cada aparelho.

Na prática, o design responsivo se apoia em três pilares. Primeiro, layouts flexíveis, depois imagens flexíveis e, por fim, media queries para tratar as exceções.

Além disso, ele traz um benefício importante para o desenvolvimento. Com as técnicas certas, você escreve menos código específico para cada tela e mantém o projeto mais fácil de evoluir.

O ponto de partida do design responsivo: a meta tag viewport

Antes de qualquer linha de CSS, a página precisa informar ao navegador como ele deve dimensionar o conteúdo. Para isso, usamos a meta tag viewport dentro do <head>.

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

Segundo o guia de fundamentos de design responsivo do web.dev, o valor width=device-width faz a página ocupar a largura da tela em pixels independentes de dispositivo. Já o initial-scale=1 evita zooms indesejados quando o usuário gira o aparelho.

Sem essa tag, muitos navegadores móveis renderizam a página como se ela estivesse em uma tela de desktop e depois reduzem tudo. Consequentemente, o texto fica minúsculo e todo o seu esforço com design responsivo perde efeito.

Fluxo flexível

É de extrema importância usar técnicas e recursos que transformam a nossa página em uma página responsiva. Além disso, esses recursos deixam o próprio desenvolvimento mais fluido, porque reduzem a quantidade de ajustes manuais.

Unidades de medida relativas no design responsivo

Quando trabalhamos com CSS, estamos definindo como cada elemento deve se comportar na tela em questão. Por isso, sempre que precisamos controlar tamanhos ou permitir que um elemento cresça e encolha de forma dinâmica, usamos unidades de medida relativas.

Com certeza você já se deparou com um CSS desta maneira:

.panel {
  width: 300px;
}

Aqui, definimos a largura (width) como 300 pixels, ou seja, um tamanho totalmente fixo. O pixel é a principal unidade absoluta, isto é, aquela que não muda quando o tamanho do dispositivo muda.

.panel {
  width: 50%;
}

O simples fato de trocar para uma unidade relativa, como a porcentagem, já traz benefícios gigantescos. Afinal, a largura passa a acompanhar automaticamente a largura do dispositivo que o usuário está usando.

Então, sempre que possível, prefira unidades relativas a unidades absolutas. Para facilitar, deixo abaixo a lista das principais unidades de cada grupo:

Unidades relativas: em, rem, %, vw, vh, vmin e vmax.
Unidades absolutas: px, pt, cm, mm e pc.

Cada unidade relativa usa uma referência diferente. A unidade % depende do elemento pai, enquanto vw e vh representam 1% da largura e da altura da janela.

Já vmin e vmax usam, respectivamente, a menor e a maior dimensão da janela. Por isso, elas ajudam em elementos que precisam caber tanto na vertical quanto na horizontal.

As unidades em e rem merecem atenção especial, porque se baseiam no tamanho da fonte. Se você ficar em dúvida entre elas, vale ler o nosso artigo em ou rem: qual escolher.

Em resumo, rem toma como base o tamanho da fonte do elemento raiz, enquanto em toma como base a fonte do próprio elemento. Assim, quando o usuário aumenta a fonte padrão do navegador, todo o design responsivo acompanha a mudança.

Layouts flexíveis

Uma boa recomendação para quem lida com páginas responsivas é usar ferramentas que dão suporte ao layout flexível. Entre as principais, destaco o Flexbox e o Grid, que oferecem um suporte excelente para praticamente qualquer página.

O Flexbox foi o primeiro recurso de layout totalmente flexível disponibilizado para criarmos páginas adaptáveis. Para usá-lo, basta definir a propriedade display no CSS.

.panel {
  display: flex;
}

Com isso, os itens filhos passam a se distribuir em linha e a dividir o espaço disponível.

Por padrão, porém, os itens tentam caber todos na mesma linha. Para que eles quebrem para a linha seguinte em telas menores, combine o Flexbox com flex-wrap.

.panel {
  display: flex;
  flex-wrap: wrap;
}

/* cada card cresce, encolhe e parte de uma base de 200px */
.card {
  flex: 1 1 200px;
}

Com esse ajuste, os cards ficam lado a lado em telas largas e se empilham em telas estreitas, sem nenhuma media query. Se quiser se aprofundar, confira o artigo entendendo o Flexbox.

Já o Grid foi uma evolução que vai além do Flexbox, e inclusive podemos usar os dois ao mesmo tempo. Ele dá ainda mais controle sobre os elementos da tela, porque trabalha em linhas e colunas simultaneamente.

.panel {
  display: grid;
}

O Grid também traz a unidade fr, que representa uma fração do espaço livre. Por exemplo, grid-template-columns: 1fr 3fr; cria duas colunas, sendo a segunda três vezes maior que a primeira.

Combinando repeat, auto-fit e minmax, o Grid cria quantas colunas couberem na tela. Esse é um dos padrões mais úteis do design responsivo moderno.

.gallery {
  display: grid;
  /* cada coluna tem no mínimo 200px e divide o espaço restante */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Para conhecer as demais propriedades, leia o nosso guia básico de display grid.

Media queries no design responsivo

Com certeza, as media queries são um dos melhores recursos do design responsivo para controlar exceções e ajustar elementos em diferentes tamanhos de tela. Com elas, você define uma condição no CSS e, a partir dessa condição, altera um comportamento específico.

@media (max-width: 600px) {
  .panel {
    width: 100%;
  }
}

Aqui, alteramos a largura do painel sempre que a tela tiver no máximo 600 pixels. Ou seja, enquanto essa condição não for atendida, o elemento mantém o comportamento original.

Para conhecer a sintaxe completa, incluindo min-width, orientação e combinações de condições, leia o nosso guia básico sobre media query.

Como escolher os breakpoints

No design responsivo, os pontos em que o layout muda recebem o nome de breakpoints. O guia do web.dev recomenda não definir esses pontos por classe de aparelho, como celular ou tablet, e sim pelo próprio conteúdo.

Na prática, você começa pela tela menor e vai aumentando a janela até o layout quebrar. Nesse momento, você adiciona um breakpoint e ajusta apenas o necessário.

Essa abordagem, conhecida como mobile first, combina bem com media queries de min-width. Assim, o CSS base atende às telas pequenas e as regras adicionais entram conforme a tela cresce.

/* estilo base para telas pequenas */
.panel {
  width: 100%;
}

/* a partir de 768px, o painel ocupa metade da tela */
@media (min-width: 768px) {
  .panel {
    width: 50%;
  }
}

Imagens flexíveis

Praticamente todo site que acessamos contém imagens, e elas precisam se comportar bem em qualquer tamanho de tela. Em outras palavras, a mesma imagem deve se adaptar a um monitor e a um smartphone.

Para isso, é muito importante definir a largura da imagem com unidades de medida relativas.

img {
  width: 100%;
}

Dessa maneira, a imagem ocupa 100% do espaço disponível, sem que você precise se preocupar com o tamanho exato do dispositivo do usuário. Esse é um dos ajustes mais simples do design responsivo.

Uma variação muito usada é max-width: 100%, que o web.dev recomenda aplicar a todas as imagens. Nesse caso, a imagem encolhe para caber no espaço, mas nunca estica além do seu tamanho original.

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

Também vale informar os atributos width e height na tag de imagem do HTML. Com eles, o navegador reserva o espaço da imagem antes de carregá-la e evita que o layout salte durante o carregamento.

Resolução das imagens

Claro que também é importante cuidar do tipo de imagem que você vai usar. Eu recomendo sempre partir de imagens com resolução maior, porque assim você atende bem tanto telas grandes quanto pequenas.

Por outro lado, uma imagem de baixa resolução perde qualidade em telas maiores. Para não pesar a página em aparelhos simples, o HTML ainda oferece o atributo srcset, que permite ao navegador escolher a versão mais adequada da mesma imagem.

Tipografia fluida no design responsivo

O texto também precisa se adaptar à tela, e não só os blocos de layout. Uma forma elegante de fazer isso é a função clamp() do CSS, que define um valor mínimo, um valor ideal e um valor máximo.

h1 {
  /* nunca menor que 1.5rem, nunca maior que 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Nesse exemplo, o título cresce junto com a largura da janela, mas respeita os limites definidos. Dessa forma, você evita títulos gigantes em monitores e minúsculos em celulares.

Como testar o design responsivo

Não basta escrever o CSS, também é preciso verificar o resultado em várias larguras. Felizmente, os navegadores modernos oferecem ferramentas próprias para isso.

No Chrome e no Edge, as ferramentas de desenvolvedor têm um modo de dispositivo, que simula telas de celulares e tablets. Já o Firefox oferece o modo de design responsivo, que permite redimensionar a área visível livremente.

Ainda assim, teste em aparelhos reais sempre que possível. Afinal, toque, rolagem e desempenho se comportam de forma diferente em um smartphone de verdade.

Uma boa prática é arrastar a janela lentamente da menor para a maior largura. Assim, você encontra os pontos em que o design responsivo quebra e decide onde entram os breakpoints.

Frameworks e design responsivo

É claro que eu não poderia deixar de falar sobre frameworks, ou seja, conjuntos de bibliotecas que ajudam muito no desenvolvimento de aplicações web. Se o conceito ainda é novo para você, confira o artigo o que é um framework.

Normalmente, ao usar um framework, temos acesso a uma gama de recursos já prontos. Portanto, não precisamos criar cada funcionalidade do zero.

Abaixo, deixo os frameworks que eu gosto de usar no frontend:

Vale lembrar que esses frameworks organizam a aplicação, mas não fazem o design responsivo sozinhos. Ou seja, as unidades relativas, o Flexbox, o Grid e as media queries continuam sendo a base de tudo.

Com todos esses recursos aplicados nas suas páginas, você começa com o pé direito no assunto design responsivo.

Curso gratuito: Fundamentos do HTML e do CSS

Por onde começar a estudar HTML? Uma ótima maneira é dar uma chance a este curso gratuito, que ensina os conceitos fundamentais das duas tecnologias presentes em quase todas as aplicações do mercado.

O curso se destina a qualquer pessoa interessada em aprender a criar páginas web, desde iniciantes completos até quem deseja aprimorar as habilidades em HTML e CSS. Além disso, não é necessário ter experiência prévia em programação, apenas vontade de aprender.

Curso gratuito: Crie sites responsivos

Neste curso, usamos a base do HTML e do CSS para criar um projeto de site responsivo, com uma interface que se adapta aos dispositivos. Durante a jornada, você aprofunda o conhecimento em medidas e proporções e aprende a usar Flex e Grid.

Conferir o curso gratuito Crie Sites Responsivos

Playlist: Fundamentos do Frontend no balta.io

Para complementar a leitura, assista à playlist de fundamentos do frontend do balta.io.

Faça uso deste conhecimento e revise este artigo, o curso e os vídeos quantas vezes precisar. Muito obrigado por fazer esta leitura comigo.

Conclusão

Pensar de forma responsiva é uma atitude que precisa acompanhar cada página que você cria. O design responsivo começa pela meta tag viewport e segue com unidades relativas, layouts flexíveis, media queries e imagens adaptáveis.

Além disso, comece sempre pela tela menor e deixe o conteúdo indicar onde estão os breakpoints. Assim, o design responsivo deixa de ser um ajuste de última hora e passa a fazer parte do seu processo.

Espero que tenha gostado da leitura. Bons códigos e até mais!

FAQ

O que é design responsivo?

É a prática de criar páginas que se adaptam ao tamanho da tela, usando layouts flexíveis, imagens flexíveis e media queries.

Por que a meta tag viewport é importante?

Sem ela, navegadores móveis renderizam a página na largura de um desktop e reduzem tudo, o que deixa o texto ilegível.

Devo usar px ou unidades relativas?

Prefira unidades relativas, como %, rem e vw, para que os elementos acompanhem o tamanho da tela e as preferências do usuário.

Flexbox ou Grid?

O Flexbox funciona melhor para alinhar itens em uma direção, enquanto o Grid organiza linhas e colunas ao mesmo tempo. Você pode combinar os dois na mesma página.

Como definir os breakpoints das media queries?

Comece pela tela menor, aumente a janela até o layout quebrar e adicione o breakpoint nesse ponto, guiado pelo conteúdo.

Glossário

Termo	Significado
Design responsivo	Abordagem que adapta o layout de uma página a diferentes tamanhos de tela.
Viewport	Área visível da página no navegador do usuário.
Unidade relativa	Medida calculada em relação a outro valor, como a tela ou a fonte.
Unidade absoluta	Medida fixa, que não muda conforme o dispositivo.
Flexbox	Modelo de layout do CSS para distribuir itens em uma direção.
Grid	Modelo de layout do CSS baseado em linhas e colunas.
Media query	Regra do CSS aplicada apenas quando uma condição da tela é atendida.
Breakpoint	Largura de tela em que o layout muda de comportamento.
Mobile first	Estratégia que começa o design pela tela menor.