Criar site responsivo: aprenda como fazer usando classes no CSS

Chegou a hora de expandir seus conhecimentos em CSS. Mais do que isso: saber como criar site responsivo usando classes no CSS. Ou seja, se prepare para pegar dicas valiosas de programação e deixar seu site mais interativo e profissional.

Cada vez mais usuários de internet estão usando outros dispositivos para acessar a rede. Todos esses dispositivos têm tamanhos de tela diferentes. E, se você quer que seu site seja popular, você precisa fazer com que ele tenha um layout responsivo em todos os tipos de aparelhos.

Um site responsivo significa que diferentes folhas de estilo CSS são carregadas para se adequarem melhor ao tamanho de tela de vários dispositivos. Para conseguir isso, media queries são usadas independentemente se o código for praticamente o mesmo de um site comum.

Este tutorial vai explicar como forçar o uso de determinadas classes de CSS para vários tamanhos de tela de dispositivos. No final, você será capaz de criar um site responsivo para uma grande parte deles. Mãos à obra!

Quer conhecer mais sobre CSS? Acesse O que é CSS? Aprenda sobre CSS com este Guia Básico e deixe seu site muito mais dinâmicos, interativos e profissionais.

O que você vai precisar

Antes de começar a seguir este guia, você vai precisar do seguinte:

  • Acesso ao servidor (para mudar seu código HTML e arquivos CSS);
  • Conhecimentos de programação em CSS e HTML;
  • Qualquer editor de códigos (pode ser até mesmo um simples editor de texto).

Passo 1 – Adicionando uma sintaxe de design responsivo em um arquivo CSS

Para criar site responsivo, você vai precisar acessar seus arquivos CSS. Para fazer isso, você precisa se conectar ao servidor em que os arquivos do seu site estão armazenados.

Navegue até o diretório em que o arquivo CSS está e o abra usando qualquer tipo de editor de texto. Lá estarão todas as classes do estilo do seu site.

Aqui, vamos definir uma classe que só será carregada quando a largura de tela do dispositivo for de 900 pixels ou meno4. E, ainda, vai alterar a largura da classe “.menu para 100% do tamanho da tela do navegador.

Um media query que permite fazer isso deve se parecer com este código abaixo:

@media only screen and (max-device-width: 900px) {
/* .menu { width:100%; } */
}

Passo 2 – Mudando propriedades de elementos para criar site responsivo

Normalmente, não é preciso mudar todas as propriedades da classe CSS. Isso porque os valores de, por exemplo, cor de fundo, cor de texto e similares, não mudam. A menos que você queira que eles tenham algum tipo de mudança mais para a frente.

Entretanto, propriedades como largura, altura ou margens são quase sempre mudados. Vamos explicar o exemplo que usamos no Passo 1.

Considere a situação em que a largura do menu de um site esteja fixada para 900 pixels. Ao abrir esse mesmo site em um dispositivo com tamanho de tela menor que 900 pixels, o site site ganharia uma barra de rolagem horizontal e o menu  não seria mostrado por inteiro.

Não é confortável navegar em um site assim e é por isso que reescrevemos o código para adaptar a largura do menu do site para 100%. Isso significa que, qualquer que seja o tamanho de tela do dispositivo, a largura do menu vai ser exatamente a mesma da largura da tela.

exemplo de site não responsivo e que você deve evitar para criar site responsivo

Se deixarmos a largura do menu fixado (neste exemplo, em 1200 pixels), teremos a situação da imagem abaixo.

Como você pode ver na imagem acima, existe uma barra horizontal no navegador e algumas partes do menu não são mostradas na tela. Ou seja, para o usuário ver todas as opções do menu, ele precisa obrigatoriamente fazer a rolagem dessa barra.    

veja como criar site responsivo como o da bbc

E, para comparação, a imagem abaixo mostra como o site da BBC aparece numa página com design responsivo. O menu, nesse caso, se adapta automaticamente à largura de tela do dispositivo que o visitante da página está usando.

O ponto central deste passo é mudar as larguras e alturas que possam ser possivelmente maiores que as resoluções de telas dos dispositivos usados pelos usuários.

Também é possível configurar larguras fixas para larguras particulares de tela. Por exemplo, configurar a largura de menu para 600 pixels se a to tamanho da tela do dispositivo for de 900 pixels. Veja abaixo códigos que você pode usar para aplicar essas mudanças.

Exemplos

  • Se o tamanho da tela for 900 pixels ou menor, é possível configurar uma classe de largura de menus para 600 pixels usando:
@media only screen and (max-device-width: 900px) {
/* .menu { width:600px; } */
}
  • Se o tamanho da tela for 700 pixels ou menor, é possível configurar uma classe de largura de menus para 400 pixels usando:
@media only screen and (max-device-width: 700px) {
/* .menu { width:400px; } */
}

Passo 3 – Testando as mudanças no navegador

Essa é a hora de saber se você conseguiu criar site responsivo usando CSS responsivo.  Agora você pode abrir seu site em um dispositivo móvel (celulares ou tablets) e checar se as mudanças aplicadas aparecem na tela.

Você também pode simplesmente tentar mudar o tamanho do navegador no seu computador pessoal e verificar como as mudanças aparecem. Basta você ir gradativamente mudando o tamanho de tela e ver, em tempo real, se as mudanças de classe CSS estão funcionando.

Conclusão

Criar site responsivo não é um bicho de sete cabeças! Tudo pode ser feito com os media querie sem grandes problemas. Os media query são uma ferramenta muito poderosa que nos permitem adaptar qualquer site para dispositivos com tamanhos de telas diferentes.

É muito fácil aprender a usar media query: eles quase não precisam de novos comandos, pois a sintaxe usada é a mesma do CSS.

O design responsivo é o método mais popular para adaptar um site. Isso porque é mais fácil fazer isso do que fazer um design totalmente novo para dispositivos móveis, evitando ter que carregar um site diferente completamente usando um dispositivo móvel.

Ainda tem dúvidas ou gostaria de uma orientação extra? Estamos pronto para ajudar você! Não deixe de nos enviar uma mensagem usando os comentários abaixo ou mesmo nosso chat de contato.

Author
O autor

Andrei L.

Jornalista e conteudista SEO/Localização na Hostinger Brasil. Tem experiência em WordPress e na produção de conteúdos de tecnologia otimizados para conquistar as melhores posições no Google. É fã de games, adora vôlei, ama o inverno e está sempre buscando se aperfeiçoar no Inglês.