Aprenda o que é responsividade no CSS e como criar layouts para diferentes dispositivos, seja computador, tablet ou até mesmo celular (mobile).
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Antes de começar com a explicação do que é responsividade no CSS, para essa aula, nós vamos utilizar outras duas aulas que nós já temos aqui no blog como base, pois elas já vão adiantar o nosso trabalho.
Você já pode ir direto nessas aulas para pegar os arquivos caso não queira ver o passo a passo de como criar tanto o Flexbox CSS quanto o Grid Layout CSS.
Responsividade CSS ou layout responsivo, nada mais é do que um layout que você cria no computador, mas que ele se adapta para todos os outros dispositivos, ou seja, ele consegue ir se ajustando caso use um tablet ou um celular.
Diferente de algumas páginas que você abre no celular que ficam “feias” por não ter esse recurso, que ficam mais difíceis até de interagir porque foram feitas específicas para um computador.
Eu aposto que você já deve ter se deparado com isso em algum site ou até mesmo, já utilizou a opção para ter a visualização de Desktop porque não conseguia navegar direito ou utilizar todas as funcionalidades do site.
Esse é um recurso que ajuda muito não só para criar layouts como para fazer alguns testes e até para você aprender como algumas páginas foram feitas.
No Chrome, por exemplo, você pode clicar no 3 pontos do navegador (na parte superior direita), ir em mais ferramentas e clicar na opção Ferramentas do programador, ou pode simplesmente utilizar o atalho Ctrl + Shift + I.
Ao acessar essa ferramenta, você vai conseguir visualizar a opção Toggle device toolbar, que fica no canto superior esquerda dessa janela que acabamos de abrir (é a segunda opção, ao lado esquerdo de elements).
Essa ferramenta vai permitir com que você altere o tamanho do seu layout para verificar a responsividade ele. No nosso exemplo, você vai notar que no tamanho 320, nós já temos a página quebrada, ou seja, já vamos ter um corte de informações que não é interessante para o usuário.
A ideia é que o usuário consiga ver todo o conteúdo independentemente do tamanho da sua tela, então mesmo que esteja em um celular, tablet, computador ou até em um TV, ele precisa conseguir visualizar todos os conteúdos de forma correta!
Nesse outro exemplo, nós expandimos muito a tela, como se fosse um computador ou um televisão, mas você nota que não é interessante ter esse espaço em branco do lado sem utilizar.
Isso quer dizer que em uma tela maior, ao invés de termos duas colunas de itens, nós possamos ter 3 ou 4 para que o layout fique mais visual utilizando o espaço disponível ao invés de deixar sem nada.
A ideia é que esse layout fique responsivo de acordo com o tamanho da tela, se tivermos uma tela menor vamos querer menos colunas e se tivermos uma tela maior vamos querer mais colunas para ocupar todo o espaço e facilitar a visualização.
Antes de iniciar com a responsividade dessa página, nós vamos fazer alguns ajustes no nosso layout, lembrando que estamos tendo como base as aulas abaixo:
Mas você vai ter o arquivo disponível para download também, então pode ou baixar o arquivo ou acompanhar essas duas aulas para entender mais sobre Grid e Flexbox!
A primeira alteração que vamos fazer é do padding, que é o espaçamento, vamos ajustar o espaçamento lateral e superior/inferior para que a nossa grade (grid) não fique colada nas bordas da página e do cabeçalho.
Então podemos colocar 2 instruções no padding, 40px e 20px, assim vamos ter 40 pixels em cima e embaixo e 20 pixels nas laterais, o que deixa a visualização muito melhor!
O outro ajuste que nós vamos fazer é justamente o da grade para que ela fique dinâmica e fique centralizada para não termos os espaços em branco.
Com isso vamos transformar o nosso main em um display flex. Para isso vamos utilizar o display: flex e o justify-content: center.
Só com esse simples detalhe, você já nota que o visual fica melhor e você pode até fazer o teste de aumentar e diminuir a tela para ver como a nossa grade se comporta.
Para não perdermos esses códigos que acamos de inserir, nós precisamos colocar eles dentro do nosso código de css, aqui só estamos fazendo os testes na página, tanto que se você atualizar a página vai perder isso que acabamos de fazer.
Então para garantir que vai ficar tudo do jeito certo, precisamos passar essas informações para dentro do nosso código em css.
main {
padding: 40px 20px;
display: flex;
justify-content: center;
}Obs.: Em relação ao espaçamento para a indentação do código, normalmente nós utilizar o Tab, só que o tamanho desse espaço pode variar para cada editor de texto. Por padrão esse Tab é equivalente a 4 espaços, mas você pode fazer a alteração para 2 por exemplo para melhorar a visualização.
Depois disso, nós vamos fazer o ajuste do grid para que a quantidade de colunas da nossa grade seja alterada de forma dinâmica, dessa maneira, quando tivermos uma tela grande vamos ter mais colunas e quando tivermos o mobile vamos ter uma coluna por exemplo.
Para isso nós vamos utilizar o media query (@media) que é para colocarmos uma condição/restrição de tamanho, assim nós vamos ter os limites de tamanho para alterar a quantidade de colunas que temos no nosso grid.
Você pode inclusive dar uma olhada na documentação das media queries para mais informações:
Então o que nós vamos fazer é restringir os tamanhos para alterar a quantidade de colunas, dessa maneira a partir do momento em que o usuário aumenta ou diminui a tela, ele vai ter uma visualização personalizada de acordo com o tamanho da tela.
.grid {
max-width: 1600px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr
gap: 10px;
}Esse código do grid é o que já temos no nosso código, mas adicionamos o max-width que é o tamanho máximo para que as imagens não cresçam indefinidamente.
E além disso, nós colocamos o template do grid com 4 imagens, por isso temos 4 vezes o 1fr.
Com o @media é que nós vamos fazer a restrição dos tamanhos do grid e do padding a medida em que a tela for diminuindo. Então vamos utilizar o código abaixo para fazer essa modificação.
@media (max-width: 1200px){
main {
padding: 30px 20px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 990px){
main {
padding: 20px;
}
}
@media (max-width: 800px){
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px){
.grid {
grid-template-columns: 1fr;
}
}Aqui nós fizemos uma divisão de 1200px, 990px, 800px e 480px, então se a tela for maior do que 1200px não vamos entrar em nenhuma dessas media queries.
Apenas quando tivermos o tamanho 1200px para baixo, dessa forma vamos seguindo a ordem. Com isso vamos poder delimitar quando vamos ter 3 colunas, 2 colunas e 1 coluna com as informações.
Isso vai deixar o nosso layout responsivo e vai deixar a sua página muito mais dinâmica sem quebrar nem ficar feia. O usuário vai ter uma experiência muito melhor e vai sempre conseguir visualizar todo o conteúdo da página.
Nós já fizemos o ajuste do conteúdo para que ele fique responsivo de acordo com o tamanho da tela do usuário, mas quando chegamos em uma tela menor, por exemplo 320px nós temos um problema no nosso cabeçalho.
Você vai notar que vamos perder informações do cabeçalho, então precisamos fazer esse ajuste nessa parte também para que ela fique responsiva, pois até o momento não tínhamos problema.
Só que em telas menores isso se torna um problema e uma das coisas que nós podemos fazer é remover o padding que está jogando os textos para a direita.
Esse padding, nós não colocamos, foi uma configuração automática do HTML, então nós vamos fazer o procedimento de resetar essas informações.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}Com isso podemos até tirar o código de resetar o body, pois já temos essas configurações nesse bloco!
Você vai notar que ainda estamos com um problema no cabeçalho que precisamos arrumar.
Uma opção que temos é diminuir o espaçamento entre a imagem e o texto e até diminuir o tamanho da nossa imagem!
Para que as outras imagens da página não sejam alteradas, vamos adicionar uma classe a essa imagem para fazer as alterações somente na nossa logo. Então vamos adicionar o class=”logo” assim vamos fazer os ajutes apenas nessa imagem.
Lembrando que você pode fazer outras alterações. Essas são apenas sugestões para esse caso em específico, até porque o ideal na visualização mobile seria o menu “sanduíche”, que é aquele menu com 3 traços que abre as outras informações.
.logo {
max-width: 70px;
}
ul {
gap: 8px;
}
nav {
padding: 10px 15px;
}Agora até os 320px nossa página está responsiva sem quebrar, então você pode alterar imagem, espaçamentos, textos… Você tem diversas opções para fazer esse ajuste e deixar sua página responsiva.
Com isso você já tem o conhecimento que precisa para deixar uma página responsiva sem que ela quebre em algum dispositivo, pois o ideal é que o usuário consiga ter a melhor experiência da sua página em qualquer dispositivo.
É comum termos sites que são excelentes, mas na hora de visualizar em um mobile, por exemplo, a página fica toda desconfigurada.
Nessa aula eu te expliquei o que é um layout responsivo (responsividade no CSS) e quais os ajustes você pode fazer em uma página para deixar esse layout responsivo em diferentes dispositivos.
O objetivo é que o usuário consiga visualizar sua página sem quebrar em qualquer dispositivo, então com o layout responsivo você garante que mesmo em um celular ou em uma televisão o usuário consegue acessar tudo que precisa e não tem sua visualização prejudicada!
Lembrando que temos mais posts aqui no blog sobre HTML e CSS e vale a pena dar uma olhada nos dois posts que deixamos como sugestão, que foram base para essa aula:
Para acessar publicações de HTML e CSS, clique aqui!
Posts mais recentes da Hashtag Treinamentos
![[Python] Biblioteca time Python - Aprenda a programar com controle de tempo e data](https://www.hashtagtreinamentos.com/wp-content/uploads/2024/06/Python-Biblioteca-time-Python-Aprenda-a-programar-com-controle-de-tempo-e-data-02-300x169.png "Biblioteca Time Python - 5 Principais Funções 1")
![[JavaScript] Minicurso de ReactJS - Aula 1 01](https://www.hashtagtreinamentos.com/wp-content/uploads/2024/06/JavaScript-Minicurso-de-ReactJS-Aula-1-01-300x169.png "Minicurso de ReactJS - Saia do Zero com Essa Tecnologia 2")
![[Python] Fuso Horário e Horário de Verão no Python](https://www.hashtagtreinamentos.com/wp-content/uploads/2024/06/Python-Fuso-Horario-e-Horario-de-Verao-no-Python-02-300x169.png "Fuso Horário no Python e Horário de Verão no Python 3")
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.