Design responsivo

Este codelab faz parte do curso de treinamento "Desenvolvimento de Apps Web Progressivos", desenvolvido pela equipe de treinamento do Google Developers. Você vai aproveitar mais este curso se fizer os codelabs em sequência.

Para detalhes completos sobre o curso, consulte a visão geral sobre o desenvolvimento de Progressive Web Apps.

Introdução

Neste laboratório, mostramos como estilizar o conteúdo do seu site para torná-lo responsivo.

O que você vai aprender

  • Como estilizar seu app para que ele funcione bem em vários formatos.
  • Como usar o Flexbox para organizar seu conteúdo em colunas com facilidade
  • Como usar consultas de mídia para reorganizar seu conteúdo com base no tamanho da tela

O que você precisa saber

  • HTML e CSS básicos

O que é necessário

  • Computador com acesso ao terminal/shell
  • Conexão com a Internet
  • Editor de texto

Faça o download ou clone o repositório pwa-training-labs do GitHub e instale a versão LTS do Node.js, se necessário.

Se você não tiver um servidor de desenvolvimento local preferido, instale o pacote http-server do Node.js:

npm install http-server -g

Navegue até o diretório responsive-design-lab/app/ e inicie o servidor:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Você pode encerrar o servidor a qualquer momento com Ctrl-c.

Abra o navegador e acesse localhost:8080/.

Observação:cancele o registro de todos os service workers e limpe todos os caches deles para localhost para que não interfiram no laboratório. No Chrome DevTools, clique em Limpar dados do site na seção Limpar armazenamento da guia Aplicativo.

Se você tiver um editor de texto que permita abrir um projeto, abra a pasta responsive-design-lab/app/. Isso facilita a organização. Caso contrário, abra a pasta no sistema de arquivos do computador. A pasta app/ é onde você vai criar o laboratório.

Essa pasta contém:

  • index.html é a página HTML principal do nosso site/aplicativo de exemplo.
  • O modernizr-custom.js é uma ferramenta de detecção de recursos que simplifica os testes de compatibilidade com o Flexbox.
  • styles/main.css é a folha de estilo em cascata do site de exemplo.

Volte ao app no navegador. Tente diminuir a largura da janela para menos de 500 px e observe que o conteúdo não responde bem.

Abra as ferramentas para desenvolvedores e ative o modo dispositivo no navegador. Esse modo simula o comportamento do app em um dispositivo móvel. A página é reduzida para ajustar o conteúdo de largura fixa na tela. Essa não é uma boa experiência porque o conteúdo provavelmente será muito pequeno para a maioria dos usuários, forçando-os a aumentar e diminuir o zoom e rolar a tela.

Substitua TODO 3 em index.html pela seguinte tag: 

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

Salve o arquivo. Atualize a página no navegador e verifique-a no modo dispositivo. Observe que a página não está mais com zoom reduzido e a escala do conteúdo corresponde à escala em um dispositivo desktop. Se o conteúdo se comportar de maneira inesperada no emulador de dispositivo, ative e desative o modo de dispositivo para redefini-lo.

Observação:a emulação de dispositivo oferece uma aproximação de como seu site vai aparecer em um dispositivo móvel, mas para ter uma ideia completa, sempre teste o site em dispositivos reais. Saiba mais sobre como depurar dispositivos Android no Chrome e no Firefox.

Explicação

Uma metatag viewport orienta o navegador sobre como controlar as dimensões e a escala da página. A propriedade width controla o tamanho da janela de visualização. Ele pode ser definido como um número específico de pixels (por exemplo, width=500) ou como o valor especial device-width,, que é a largura da tela em pixels CSS em uma escala de 100%. Existem valores height e device-height correspondentes, que podem ser úteis para páginas com elementos que mudam de tamanho ou posição com base na altura da janela de visualização.

A propriedade "initial-scale" controla o nível de zoom quando a página é carregada pela primeira vez. Definir a escala inicial melhora a experiência, mas o conteúdo ainda transborda da borda da tela. Isso será corrigido na próxima etapa.

Para saber mais

Substitua TODO 4 em styles/main.css pelo seguinte código:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Salve o arquivo. Desative o modo de dispositivo no navegador e atualize a página. Tente diminuir a largura da janela. Observe que o conteúdo muda para um layout de coluna única na largura especificada. Reative o modo dispositivo e observe que o conteúdo responde para se ajustar à largura do dispositivo.

Explicação

Para garantir que o texto seja legível, usamos uma consulta de mídia quando a largura do navegador se torna 48 rem (768 pixels no tamanho de fonte padrão do navegador ou 48 vezes o tamanho de fonte padrão no navegador do usuário). Consulte Quando usar em ou rem para uma boa explicação de por que rem é uma boa opção para unidades relativas. Quando a consulta de mídia é acionada, mudamos o layout de três colunas para uma coluna alterando o width de cada um dos três divs para preencher a página.

O Módulo de layout de caixa flexível (Flexbox) é uma ferramenta útil e fácil de usar para tornar seu conteúdo responsivo. O Flexbox permite alcançar o mesmo resultado das etapas anteriores, mas cuida de todos os cálculos de espaçamento para nós e fornece várias propriedades CSS prontas para uso na estruturação do conteúdo.

Comentar regras existentes em CSS

Comente todas as regras em styles/main.css envolvendo-as em /* e */. Essas serão nossas regras de substituição quando o Flexbox não for compatível na seção "Flexbox como melhoria progressiva".

Adicionar layout do Flexbox

Substitua TODO 5.2 em styles/main.css pelo seguinte código:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Salve o código e atualize index.html no navegador. Desative o modo de dispositivo no navegador e atualize a página. Se você diminuir a largura da janela do navegador, as colunas vão ficar mais finas até que apenas uma delas permaneça visível. Vamos corrigir isso com consultas de mídia no próximo exercício.

Explicação

A primeira regra define o container div como o contêiner flexível. Isso ativa um contexto flexível para todos os filhos diretos. Estamos misturando sintaxes antigas e novas para incluir o Flexbox e ter um suporte mais amplo. Consulte Mais informações para detalhes.

A segunda regra usa a classe .col para criar filhos flexíveis de largura igual. Definir o primeiro argumento da propriedade flex como 1 para todos os divs com a classe col divide o espaço restante de maneira uniforme entre eles. Isso é mais conveniente do que calcular e definir a largura relativa por conta própria.

Para saber mais

Opcional: definir larguras relativas diferentes

Use a pseudoclasse nth-child para definir as larguras relativas das duas primeiras colunas como 1 e a terceira como 1,5. Use a propriedade flex para definir as larguras relativas de cada coluna. Por exemplo, o seletor da primeira coluna ficaria assim:

.container .col:nth-child(1)

Usar consultas de mídia com Flexbox

Substitua TODO 5.4 em styles/main.css pelo código abaixo:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Salve o código e atualize index.html no navegador. Agora, se você diminuir a largura do navegador, o conteúdo será reorganizado em uma coluna.

Explicação

Quando a media query é acionada, mudamos o layout de três colunas para uma coluna definindo a propriedade flex-flow como column. Isso tem o mesmo resultado da media query que adicionamos na etapa 5. O Flexbox oferece muitas outras propriedades, como flex-flow, que permitem estruturar, reordenar e justificar facilmente seu conteúdo para que ele responda bem em qualquer contexto.

Como o Flexbox é uma tecnologia relativamente nova, precisamos incluir alternativas no nosso CSS.

Adicionar Modernizr

O Modernizr é uma ferramenta de detecção de recursos que simplifica os testes de compatibilidade com o Flexbox.

Substitua TODO 6.1 em index.html pelo código para incluir o build Modernizr personalizado:

<script src="modernizr-custom.js"></script>

Explicação

Incluímos um build do Modernizr na parte de cima de index.html, que testa a compatibilidade com Flexbox. Isso executa o teste no carregamento da página e anexa a classe flexbox ao elemento <html> se o navegador for compatível com o Flexbox. Caso contrário, ele vai anexar uma classe no-flexbox ao elemento <html>. Na próxima seção, vamos adicionar essas classes ao CSS.

Observação:se estivéssemos usando a propriedade flex-wrap do Flexbox, precisaríamos adicionar um detector Modernizr separado apenas para esse recurso. Versões mais antigas de alguns navegadores têm suporte parcial ao Flexbox e não incluem esse recurso.

Usar o Flexbox progressivamente

Vamos usar as classes flexbox e no-flexbox no CSS para fornecer regras de substituição quando o Flexbox não for compatível.

Agora, em styles/main.css, adicione .no-flexbox na frente de cada regra que comentamos:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

No mesmo arquivo, adicione .flexbox antes do restante das regras:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Não se esqueça de adicionar .flexbox às regras das colunas individuais se você concluiu a etapa opcional 5.3.

Salve o código e atualize index.html no navegador. A página vai parecer a mesma de antes, mas agora funciona bem em qualquer navegador e dispositivo. Se você tiver um navegador que não é compatível com o Flexbox, abra index.html nele para testar as regras de substituição.

Para saber mais

Você aprendeu a estilizar seu conteúdo para torná-lo responsivo. Com as media queries, é possível mudar o layout do conteúdo com base no tamanho da janela ou da tela do dispositivo do usuário.

O que aprendemos

  • Como definir a janela de visualização visual
  • Flexbox
  • Consultas de mídia

Recursos

Saiba mais sobre os fundamentos do design responsivo

Saiba mais sobre o Flexbox como um aprimoramento progressivo

Saiba mais sobre bibliotecas para CSS responsivo

Saiba mais sobre como usar consultas de mídia

Para conferir todos os codelabs do curso de treinamento de PWA, consulte o codelab de boas-vindas do curso.