Design Web Responsivo para Todas as Telas

Introdução

Neste projeto, você aprenderá como criar um design web responsivo que se adapta a diferentes tamanhos de tela. O objetivo é desenvolver uma página web que proporcione uma experiência de usuário confortável tanto para usuários de desktop quanto para usuários de dispositivos móveis.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o layout inicial para as seções de menu e conteúdo
• Como implementar o design responsivo usando media queries (consultas de mídia)
• Como testar e refinar o design responsivo para garantir uma experiência perfeita

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar um design web responsivo que se adapta a diferentes tamanhos de tela
• Desenvolver uma interface móvel amigável, incluindo um menu recolhível
• Aplicar as melhores práticas para testar e iterar em um design web responsivo

Configurar o Projeto

Nesta etapa, você configurará o projeto e abrirá os arquivos no editor.

Abra a pasta do projeto, que contém os seguintes arquivos e diretórios:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

Dentre eles:

• index.html é a página principal.
• css/style.css é o arquivo onde os estilos precisam ser complementados.
• js/jQuery.min.js é o arquivo da biblioteca jQuery.
• images é a pasta de imagens.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Implementar o Design Responsivo

Nesta etapa, você aprenderá como implementar o design responsivo para a página web.

1. Adicione a seguinte regra CSS ao final do arquivo css/style.css:

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

Este código CSS configura o design responsivo para a página web. Ele inclui estilos para o layout do lado mobile, incluindo o botão do menu, o menu expandido e o layout do conteúdo.

As principais mudanças são:

• A altura e a altura da linha do menu são definidas como 54px para corresponder ao design mobile.
• O botão do menu (.icon-menu) é exibido e estilizado.
• A classe .collapse é usada para ocultar os itens do menu por padrão e é exibida quando o botão do menu é clicado.
• Os estilos .row e .box são atualizados para exibir o conteúdo em um layout de coluna única no mobile.
• A margem de #tutorials img é removida para se ajustar ao layout mobile.

2. Salve o arquivo css/style.css e atualize a página web. Você agora deve ver o design responsivo em ação, com o layout mobile exibido quando a largura da tela for menor que 800px.

Testar e Refinar o Design Responsivo

Nesta etapa, você testará o design responsivo e fará os refinamentos necessários.

1. Abra a página web no seu navegador e redimensione a janela para diferentes larguras para garantir que o layout se ajuste corretamente.
2. Teste a funcionalidade do botão do menu no layout mobile, garantindo que os itens do menu sejam exibidos quando o botão for clicado.
3. Inspecione o layout do conteúdo nas visualizações desktop e mobile, certificando-se de que as imagens, o texto e o espaçamento tenham uma boa aparência.
4. Se você encontrar algum problema ou áreas para melhoria, atualize o CSS no arquivo css/style.css e atualize a página para ver as alterações.

Lembre-se, o design web responsivo é um processo iterativo, então não tenha medo de experimentar e refinar o design até que você esteja satisfeito com os resultados.

O resultado mobile finalizado é mostrado abaixo:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.