Com o aumento do número de usuários de smartphones na Internet, tornou-se cada vez mais importante para os web designers organizar o conteúdo de maneira que funcione bem para uma variedade de tamanhos de tela. O web design responsivo, originalmente definido por Ethan Marcotte em A List Apart, é uma estratégia de design que responde às necessidades dos usuários e aos recursos dos dispositivos deles, mudando o layout de um site para se adequar ao dispositivo usado. Por exemplo, um site responsivo pode mostrar conteúdo em uma visualização de coluna única em um smartphone, duas colunas em um tablet e três ou quatro colunas em um computador desktop.
Como os dispositivos com acesso à Internet têm tantos tamanhos de tela possíveis, é importante que seu site se adapte a qualquer tamanho de tela atual ou futura. O design responsivo moderno também considera modos de interação, como telas sensíveis ao toque. O objetivo é otimizar a experiência para todos.
Definir a janela de visualização
As páginas otimizadas para vários dispositivos precisam incluir uma tag de janela de visualização meta no cabeçalho do documento. Essa tag informa ao navegador como controlar as dimensões e a escala da página.
Para oferecer a melhor experiência, os navegadores de dispositivos móveis renderizam a página com uma largura de tela de computador (geralmente cerca de 980px, embora isso varie entre os dispositivos) e tentam melhorar a aparência do conteúdo aumentando o tamanho das fontes e redimensionando o conteúdo para caber na tela. Isso pode fazer com que as fontes pareçam inconsistentes e
exija que os usuários apliquem zoom para ver e interagir com o conteúdo.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Usar o valor da janela de visualização meta width=device-width informa à página para corresponder à largura da tela em pixels independentes de dispositivo (DIP), uma unidade de pixel visual padrão (que pode ser composta de muitos pixels físicos em uma tela de alta densidade). Isso permite que a página redefina o conteúdo para corresponder a diferentes tamanhos de tela.
Alguns navegadores mantêm a largura da página constante ao girar para o modo paisagem e aumentam o zoom para preencher a tela em vez de refluir. Adicionar o valor initial-scale=1 informa aos navegadores
para definir uma relação de 1:1 entre pixels CSS e pixels independentes de dispositivo
independente da orientação do dispositivo, permitindo que a página aproveite toda a
largura da paisagem.
A auditoria do Lighthouse Não tem uma tag <meta name="viewport"> com width ou initial-scale
pode ajudar a automatizar o processo de verificação se os documentos HTML
usam a metatag de viewport corretamente.
Dimensionar o conteúdo para a janela de visualização
Em computadores e dispositivos móveis, os usuários estão acostumados a rolar sites verticalmente, mas não horizontalmente. Forçar o usuário a rolar na horizontal ou diminuir o zoom para ver a página inteira causa uma experiência ruim.
Ao desenvolver um site para dispositivos móveis com uma tag de metajanela de visualização, é comum criar acidentalmente conteúdo da página que não se encaixa na janela de visualização especificada. Por exemplo, uma imagem mostrada mais larga que a janela de visualização pode causar rolagem horizontal. Para evitar isso, ajuste o conteúdo para caber na janela de visualização.
A auditoria do Lighthouse O conteúdo não está no tamanho correto para a janela de visualização pode ajudar você a automatizar o processo de detecção de conteúdo transbordante.
Imagens
Uma imagem com dimensões fixas faz com que a página role se for maior que a
janela de visualização. Recomendamos atribuir a todas as imagens um max-width de 100%, que reduz
as imagens para caber no espaço disponível e evita que elas se estendam além
do tamanho inicial.
Na maioria dos casos, adicione o seguinte à sua folha de estilo:
img {
max-width: 100%;
display: block;
}
Adicione as dimensões da imagem ao elemento img
Mesmo quando você define max-width: 100%, ainda recomendamos adicionar os atributos width e height às tags <img> para que o navegador possa reservar espaço para as imagens antes que elas sejam carregadas. Isso ajuda a evitar mudanças de layout.
Layout
Como as dimensões e a largura da tela em pixels CSS variam muito entre dispositivos (por exemplo, entre smartphones e tablets, e até mesmo entre smartphones diferentes), o conteúdo não deve depender de uma largura específica da janela de visualização para ser renderizado corretamente.
Antes, isso exigia a definição de elementos de layout em porcentagens. O uso de medidas de pixel exige que o usuário role a tela na horizontal em telas pequenas:
Usar porcentagens faz com que as colunas fiquem mais estreitas em telas menores, porque cada coluna sempre ocupa a mesma porcentagem da largura da tela:
As técnicas modernas de layout CSS, como flexbox, layout de grade e multicol, facilitam muito a criação dessas grades flexíveis.
Flexbox
Use o Flexbox quando tiver um conjunto de itens de tamanhos diferentes e quiser que eles se encaixem confortavelmente em uma ou várias linhas, com itens menores ocupando menos espaço e maiores ocupando mais espaço.
.items {
display: flex;
justify-content: space-between;
}
Você pode usar o Flexbox para mostrar itens em uma única linha ou agrupados em várias linhas à medida que o espaço disponível diminui.
Layout de grade CSS
O layout de grade CSS cria grades flexíveis. Você pode melhorar o exemplo flutuante anterior usando o layout de grade e a unidade fr, que representa uma parte do espaço disponível no contêiner.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Você também pode usar a grade para criar layouts regulares com quantos itens couberem. O número de faixas disponíveis é reduzido à medida que o tamanho da tela diminui. A demonstração a seguir mostra uma grade com o máximo de cards que cabem em cada linha, com um tamanho mínimo de 200px.
Leia mais sobre o layout de grade do CSS
Layout de várias colunas
Para alguns tipos de layout, é possível usar o layout de várias colunas (Multicol),
que cria números responsivos de colunas com a propriedade column-width.
Na demonstração a seguir, a página adiciona colunas quando há espaço para outra coluna 200px.
Use consultas de mídia CSS para responsividade
Às vezes, é necessário fazer mudanças mais extensas no layout para oferecer suporte a determinados tamanhos de tela do que as técnicas descritas anteriormente permitem. É aí que as consultas de mídia se tornam úteis.
As consultas de mídia são filtros simples que podem ser aplicados a estilos CSS para mudar esses estilos com base nos tipos de dispositivos que renderizam o conteúdo. Eles também podem mudar o estilo com base nos recursos do dispositivo, incluindo largura, altura, orientação e se o dispositivo está sendo usado como uma tela sensível ao toque.
Para fornecer estilos diferentes para impressão, você pode segmentar um tipo de saída e incluir uma folha de estilo para estilos de impressão:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
Também é possível usar uma media query para incluir estilos de impressão na sua principal folha de estilo:
@media print {
/* print styles go here */
}
Para design responsivo, as consultas mais comuns são sobre recursos de dispositivos. Assim, você pode personalizar o layout para telas sensíveis ao toque ou menores.
Consultas de mídia com base no tamanho da janela de visualização
Com as consultas de mídia, é possível criar uma experiência responsiva que aplica estilos específicos a tamanhos de tela específicos. As consultas de tamanho de tela podem testar o seguinte:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Consultas de mídia com base na capacidade do dispositivo
Devido à variedade de dispositivos disponíveis, os desenvolvedores não podem presumir que todo dispositivo grande é um computador desktop ou notebook comum, ou que todo dispositivo pequeno usa uma tela sensível ao toque. Algumas adições mais recentes à especificação de consultas de mídia permitem testar recursos como o tipo de ponteiro usado para interagir com o dispositivo e se o usuário pode manter um ponteiro sobre os elementos.
hoverpointerany-hoverany-pointer
Tente abrir esta demonstração em dispositivos diferentes, como um computador desktop comum e um smartphone ou tablet.
Esses recursos mais recentes têm boa compatibilidade com todos os navegadores modernos. Saiba mais nas páginas da MDN sobre hover, any-hover, pointer e any-pointer.
Usar any-hover e any-pointer
Os recursos any-hover e any-pointer testam se o usuário consegue manter um ponteiro
sobre elementos (geralmente chamado de passar o cursor) ou usar um ponteiro, mesmo que não seja
a principal forma de interação com o dispositivo. Tenha muito cuidado ao usar esses recursos. Por exemplo, evite forçar um usuário de tela touch a usar um mouse.
No entanto, any-hover e any-pointer podem ser úteis se for importante determinar que tipo de dispositivo um usuário tem. Por exemplo, um laptop com tela sensível ao toque e trackpad precisa corresponder a ponteiros aproximados e precisos, além da capacidade de passar o cursor.
Como escolher pontos de interrupção
Não defina pontos de interrupção com base em classes de dispositivos, produtos, nomes de marcas ou sistemas operacionais. Isso dificulta a manutenção do código. Em vez disso, deixe o conteúdo determinar como o layout muda para se ajustar ao contêiner.
Escolha pontos de interrupção importantes começando pequeno e aumentando
Crie o conteúdo para caber em uma tela pequena primeiro e depois expanda a tela até que um ponto de interrupção se torne necessário. Isso permite minimizar o número de pontos de interrupção na sua página e otimizá-los com base no conteúdo.
O exemplo a seguir mostra o widget de previsão do tempo no início desta página. A primeira etapa é fazer com que a previsão fique boa em uma tela pequena:
Em seguida, redimensione o navegador até que haja muito espaço em branco entre os elementos
para que o widget fique bom. A decisão é subjetiva, mas mais de 600px certamente é muito amplo.
Para inserir um ponto de interrupção em 600px, crie duas media queries no final do CSS do componente: uma para usar quando o navegador for 600px ou mais estreito, e outra para quando for mais largo que 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Por fim, refatore o CSS. Dentro da consulta de mídia para uma max-width de 600px,
adicione o CSS que é apenas para telas pequenas. Dentro da consulta de mídia para uma
min-width de 601px, adicione CSS para telas maiores.
Escolha pontos de interrupção secundários quando necessário
Além de escolher pontos de interrupção principais quando o layout muda significativamente, também é útil ajustar para pequenas mudanças. Por exemplo, entre os principais pontos de interrupção, pode ser útil ajustar as margens ou o padding de um elemento ou aumentar o tamanho da fonte para que ela pareça mais natural no layout.
Este exemplo segue o mesmo padrão do anterior, começando com a otimização de layouts de tela menores. Primeiro, aumente a fonte quando a largura da janela de visualização for maior que 360px. Depois disso, quando houver espaço suficiente, você poderá
separar as temperaturas alta e baixa para que fiquem na mesma linha e aumentar os
ícones de clima.
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
Para telas grandes, recomendamos limitar a largura máxima do painel de previsão para que ele não use toda a largura da tela.
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
Otimizar texto para leitura
A teoria clássica de legibilidade sugere que uma coluna ideal deve conter de 70 a 80 caracteres por linha (cerca de 8 a 10 palavras em inglês). Considere adicionar um ponto de interrupção sempre que a largura de um bloco de texto ultrapassar cerca de 10 palavras.
Neste exemplo, a fonte Roboto em 1em produz 10 palavras por linha na tela menor, mas telas maiores precisam de um ponto de interrupção. Nesse caso, se a largura do navegador for maior que 575px, a largura ideal do conteúdo será 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Evite ocultar conteúdo (:#avoid-hiding-content)
Tenha cuidado ao escolher o conteúdo que será ocultado ou mostrado, dependendo do tamanho da tela. Não oculte conteúdo só porque ele não cabe na tela. O tamanho da tela não prevê o que um usuário pode querer ver. Por exemplo, remover a contagem de pólen da previsão do tempo pode ser um problema grave para quem sofre de alergias na primavera e precisa dessa informação para decidir se pode sair de casa.
Ver pontos de interrupção de consultas de mídia no Chrome DevTools
Depois de configurar os pontos de interrupção da consulta de mídia, verifique como eles afetam a aparência do seu site. Você pode redimensionar a janela do navegador para acionar os pontos de interrupção, mas o Chrome DevTools tem um recurso integrado que mostra como uma página aparece em diferentes pontos de interrupção.
Para ver sua página em diferentes pontos de interrupção:
- Abra o DevTools.
- Ative o Modo dispositivo. Isso abre no modo responsivo por padrão.
- Para ver as consultas de mídia, abra o menu "Modo de dispositivo" e selecione Mostrar consultas de mídia. Isso mostra seus pontos de interrupção como barras coloridas acima da página.
- Clique em uma das barras para ver sua página enquanto essa consulta de mídia está ativa. Clique com o botão direito em uma barra para acessar a definição dessa consulta de mídia.