Objetivos da Aula

Introdução

Fala programador, tudo bem com você? Nessa aula aqui nós iremos ter uma visão geral do que é a responsividade, como você faz para ver se o seu site está responsivo e entender a importância da responsividade.

O que é e como funciona

  1. A responsividade nada mais é do que a mudança do layout para diferentes tamanhos de tela. Com a responsividade, você não só muda coisas de lugar, mas pode fazer coisas serem substituídas. Se você tiver uma navbar normal, você pode substituir em certo ponto ela para uma navbar hambúrguer.
  2. Nós vamos começar vendo a responsividade do site da onebitcode. Para vermos a responsividade, ou a gente clica F12, que vai abrir uma tela nova, ou clicamos com o botão direito na tela e vamos em “inspecionar”
  3. Aqui em inspecionar, o seu layout provavelmente vai estar igual ao meu, com essa janela que apareceu na lateral. Só que, para vermos e testarmos a responsividade, a melhor coisa é que essa barra fique na parte de baixo. Para mudarmos é simples, tem o X no topo superior esquerdo, ao lado dele temos 3 bolinhas, clicaremos nela e em seguida, clicaremos no ícone que tem uma barra na parte de baixo.
    1. Essa barra também poderia ficar no lado esquerdo, ou fora da página clicando nos outros ícones.
  4. Bom, agora, estando aqui no devtools do google, nós podemos ver que temos um ícone de celular no topo dessa aba aberta. Clicando nela, vamos ter um novo layout, com ele nós temos duas opções de teste de responsividade, ir diminuindo a tela puxando esses dois traços na lateral, ou clicando na barra cinza no topo, onde já temos tamanhos “fixos”.
  5. Podemos ver que, a medida que vamos diminuindo, as coisas na tela vão se adaptando, mudando de lugar, etc… E em um certo momento, algumas delas vão sumir e outras vão aparecer, tipo o sidebar e algumas coisas aqui no bottom bar.
  6. Isso é a responsividade, é algo simples de se fazer, só que, é demorado, e se você não fizer do jeito correto, teremos algumas problemas na produção da responsividade. Mas vamos agora colocar a mão na massa

Conclusão

Nessa aula nós tivemos uma visão geral sobre a responsividade, vimos como checar se a nossa aplicação está com ela funcionando e também vimos a importância da responsividade.