À medida que o número de usuários de celular na Internet aumenta, ele se tornou cada vez mais importante que os web designers disponham o conteúdo de maneira que funcione adequado para vários tamanhos de tela. Web design responsivo, originalmente definido pelos Ethan Marcotte em A List Apart, é uma estratégia de design que responde e dos dispositivos delas, recursos alterando o layout de um site de acordo com o dispositivo que está sendo usado. Para 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 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 futuro. Moderna o design responsivo 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
Páginas otimizadas para uma variedade de dispositivos devem incluir uma tag meta janela de visualização no cabeçalho do documento. Essa tag informa ao navegador como controlar a configuração e escalonamento.
Para oferecer a melhor experiência, os navegadores para dispositivos móveis renderizam a página em uma
largura da tela do computador (geralmente cerca de 980px, embora isso varie de acordo com o dispositivo)
e tentar melhorar a aparência do conteúdo, aumentando os tamanhos das fontes e
dimensionando o conteúdo para caber na tela. Isso pode fazer com que as fontes pareçam inconsistentes
exigem que os usuários aumentem o 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>
…
O uso do valor da janela de visualização meta width=device-width instrui a página a corresponder ao
largura da tela em pixels independentes de dispositivo (DIP), uma unidade de pixel visual padrão
(composto por vários pixels físicos em uma tela de alta densidade). Isso
permite que a página faça reflow do conteúdo para corresponder a diferentes tamanhos de tela.
Alguns navegadores mantêm a
constante ao girar para o modo paisagem e aplicar zoom para preencher
da tela em vez de reflow. Adicionar o valor initial-scale=1 informa aos navegadores
para definir uma relação 1:1 entre pixels CSS e pixels independentes de dispositivo
independentemente da orientação do dispositivo, permitindo que a página aproveite o
largura em modo paisagem.
A mensagem Não tem uma tag <meta name="viewport"> com width ou initial-scale
A auditoria do Lighthouse pode ajudar você a automatizar o processo de verificação
documentos usem a metatag da janela de visualização corretamente.
Dimensionar o conteúdo de acordo com 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 a tela horizontalmente ou para diminuir o zoom para ver a página inteira prejudica a experiência do usuário.
Ao desenvolver um site para dispositivos móveis com uma tag meta janela de visualização, é comum criam acidentalmente um conteúdo de página que não se encaixa no especificado janela de visualização. Por exemplo, uma imagem exibida mais larga do que a janela de visualização pode fazer rolagem horizontal. Para evitar isso, ajuste seu conteúdo para caber dentro janela de visualização.
A mensagem O conteúdo não está dimensionado corretamente para a janela de visualização A auditoria do Lighthouse pode ajudar você a automatizar o processo de detecção de estouros conteúdo.
Imagens
Uma imagem com dimensões fixas faz com que a página role se for maior que o
janela de visualização. Recomendamos que todas as imagens tenham um max-width de 100%, que diminui
imagens para caber no espaço disponível, evitando que elas se estendam além
para o tamanho inicial.
Na maioria dos casos, você pode fazer isso adicionando o seguinte à sua folha de estilo:
img {
max-width: 100%;
display: block;
}
Adicionar as dimensões da imagem ao elemento img
Mesmo quando você define max-width: 100%, ainda recomendamos adicionar width e
height às tags <img> para que o navegador possa reservar espaço para
antes de carregá-las. Isso ajuda a evitar mudanças de layout.
Layout
Como as dimensões e a largura da tela em pixels CSS variam muito entre os dispositivos (por exemplo, entre smartphones e tablets, e até mesmo entre smartphones diferentes), conteúdo não deve depender de uma largura de janela de visualização específica para ser bem renderizado.
Antes, isso exigia a definição de elementos de layout em porcentagens. Usando o Pixel exige que o usuário role horizontalmente em telas pequenas:
Usar porcentagens em vez disso torna as colunas mais estreitas em telas menores, porque cada coluna sempre ocupa a mesma porcentagem da largura da tela:
Técnicas modernas de layout CSS, como Flexbox, layout de grade e marca Multicol criar essas grades flexíveis com muito mais facilidade.
Flexbox
Use o Flexbox quando você tiver um conjunto de itens de diferentes tamanhos e quiser que eles se encaixam confortavelmente em uma ou várias linhas, com itens menores ocupando menos espaço, e os maiores ocupam mais espaço.
.items {
display: flex;
justify-content: space-between;
}
Você pode usar o Flexbox para exibir itens como uma única linha ou agrupados em várias linhas conforme o espaço disponível diminui.
Layout de grade CSS
O layout de grade do CSS cria grades flexíveis. É possível melhorar os dados flutuantes anteriores
exemplo, usando o layout de grade e a unidade fr, que representa uma parte do
o espaço disponível no contêiner.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
Você também pode usar o layout de grade para criar layouts de grade regulares com quantos itens
de acordo com as necessidades. O número de músicas disponíveis é reduzido à medida que o tamanho da tela
diminui. A demonstração a seguir mostra uma grade com quantos cartões couberem
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 de 200px.
Usar consultas de mídia CSS para aumentar a capacidade de resposta
Às vezes, pode ser necessário fazer alterações mais extensas em seu layout para oferecem suporte a determinados tamanhos de tela do que as técnicas descritas anteriormente permitem. É aí que as consultas de mídia se tornam úteis.
Consultas de mídia são filtros simples que você pode aplicar a estilos CSS para alterar esses estilos com base nos tipos de dispositivo que renderizam o conteúdo. Eles também podem alterar o estilo com base nos recursos do dispositivo, incluindo largura, altura, orientação, e se o dispositivo está sendo usado como touchscreen.
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>
…
Você também pode usar uma consulta de mídia para incluir estilos de impressão na sua folha de estilos principal:
@media print {
/* print styles go here */
}
Para Web design responsivo, as consultas mais comuns são para recursos do dispositivo, portanto você pode personalizar o layout para touchscreens ou telas menores.
Consultas de mídia com base no tamanho da janela de visualização
As consultas de mídia permitem criar uma experiência responsiva que se aplica a estilos a um tamanho de tela específico. Consultas por tamanho de tela podem testar o o seguinte:
width(min-width,max-width)height(min-height,max-height)orientationaspect-ratio
Todos esses recursos oferecem excelente suporte ao navegador. Para mais detalhes, incluindo informações de suporte do navegador, consulte largura, height, orientação proporção no MDN.
Consultas de mídia com base na capacidade do dispositivo
Dada a variedade de dispositivos disponíveis, os desenvolvedores não podem presumir que todo dispositivo grande é um computador desktop ou laptop comum, ou que cada dispositivo pequeno usa uma tela touchscreen. Algumas adições mais recentes às consultas de mídia permitem testar recursos como o tipo de ponteiro usado para interagir com o dispositivo e se o usuário pode segurar um ponteiro os elementos.
hoverpointerany-hoverany-pointer
Tente assistir a esta demonstração em diferentes dispositivos, como um computador desktop comum e um telefone ou tablet.
Esses recursos mais novos têm um bom suporte em todos os navegadores mais recentes. Saiba mais em as páginas MDN para passar o cursor, a qualquer hora, ponteiro e qualquer ponteiro.
Usar any-hover e any-pointer
Os recursos any-hover e any-pointer testam se o usuário consegue segurar um ponteiro.
sobre elementos (também chamado de passar o cursor) ou usar um ponteiro, mesmo que seja
e não a principal maneira
de interagir com o dispositivo. Tenha muito cuidado ao usar
por exemplo, para evitar forçar um usuário de touchscreen a alternar para 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
touchscreen e trackpad devem corresponder a ponteiros aproximados e finos, além de
a capacidade de passar o cursor.
Como escolher pontos de interrupção
Não defina pontos de interrupção com base em classes de dispositivo ou em qualquer produto, nome de marca ou operacional principal. Isso dificulta a manutenção do código. Em vez disso, deixe o conteúdo determina como o layout muda para se ajustar ao contêiner.
Escolha os principais pontos de interrupção começando pequeno e progredindo
Projete 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 exemplo do widget de previsão do tempo início desta página. A primeira etapa é fazer com que a previsão pareça boa para um tela pequena:
Em seguida, redimensione o navegador até que haja muito espaço em branco entre os elementos.
para deixar o widget com uma boa aparência. A decisão é subjetiva, mas maior que 600px
é certamente grande demais.
Para inserir um ponto de interrupção em 600px, crie duas consultas de mídia no final da sua
CSS para o componente: um para usar quando o navegador for 600px ou mais restrito e
outro quando for mais largo que 600px.
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
Por fim, refatore o CSS. Na consulta de mídia para um max-width de 600px,
adicione o CSS, que é apenas para telas pequenas. Dentro da consulta de mídia
min-width de 601px adicionam CSS para telas maiores.
Escolha pontos de interrupção secundários quando necessário
Além de escolher os principais pontos de interrupção quando o layout muda significativamente, também é útil ajustar as pequenas alterações. Por exemplo, entre as principais pontos de interrupção, pode ser útil ajustar as margens ou o preenchimento de um elemento, ou aumente o tamanho da fonte para deixá-la mais natural no layout.
Este exemplo segue o mesmo padrão do anterior, começando com
otimizar layouts de telas menores. Primeiro, otimize a fonte quando a janela de visualização
é maior que 360px. Depois disso, quando houver espaço suficiente,
separar as temperaturas máxima e mínima para que fiquem na mesma linha e
ícones de clima maiores.
@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;
}
}
Em 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 da legibilidade clássica 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 sempre que a largura de um bloco de texto ultrapassar 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 o
largura do navegador for maior que 575px, a largura do conteúdo ideal é 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
Evite ocultar conteúdo (:#avoid-hidden-content)
Tenha cuidado ao escolher qual conteúdo ocultar ou mostrar dependendo do tamanho da tela. Não oculte conteúdo só porque ele não cabe na tela. Tamanho da tela não prevê o que um usuário pode querer ver. Por exemplo, a remoção do pólen a contagem da previsão do tempo pode ser um problema sério para a alergia na primavera que precisam dessas informações para decidir se podem sair.
Conferir pontos de interrupção de consultas de mídia no Chrome DevTools
Depois de configurar seus pontos de interrupção de consultas de mídia, verifique como eles afetam as propriedades aparência Você pode redimensionar a janela do navegador para acionar os pontos de interrupção, mas o Chrome DevTools tem um recurso integrado que mostra a aparência da página pontos de interrupção diferentes.
Para visualizar sua página em diferentes pontos de interrupção:
- Abra o DevTools.
- Ative o Modo dispositivo. Ele será aberto no modo responsivo por padrão.
- Para acessar suas consultas de mídia, abra o menu "Modo 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 visualizar sua página enquanto essa consulta de mídia estiver ativa. Clique com o botão direito do mouse em uma barra para acessar a definição dessa consulta de mídia.