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!
Conteúdo
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.
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.
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.
Comentários
setembro 12 2018
muito obrigado
setembro 12 2018
;)
fevereiro 14 2019
vou testar amanha, mas parece fácil e simples.
fevereiro 16 2019
;)
agosto 03 2019
Ola, inseri o codigo acima na minha pagina css, e tire as partes de comentario e mesmo assim nao funcionou...
agosto 24 2019
gostei bastante, obrigado!!
setembro 18 2019
Quero agradecer pelo conteúdo apresentado aqui, com certeza ajuda bastante para pessoas na área de programação e conhecimento nunca é demais.
novembro 17 2020
Oi pessoas! Conseguiram, de-me retorno, grato
dezembro 07 2020
Olá! boa tarde Fiz todo o processo acima, mais mesmo assim no esta a mudar nada na minha página!
dezembro 07 2020
Olá, Delgêncio! Entra em contato com nossa equipe de sucesso do cliente que eles podem te ajudar melhor! :D