Como Criar Websites Responsivos
Um Desenvolvedor Web decente sabe que, hoje em dia, qualquer website que desenvolver terá que ser responsivo. É inevitável… Aliás é inaceitável que não seja assim, uma vez que, cada vez mais os utilizadores da internet o fazem em dispositivos diferentes. É, por isso, imprescindível que o site tenha um layout capaz de dar resposta a cada um desses dispositivos, fazendo com que o conteúdo se ajuste.
Já vos falei do Bootstrap que pode ser uma boa ferramenta para isto, mas hoje trago-vos outra solução.
Para começar a criar um website responsivo há que utilizar a regra @media. O chamado media query.
@media screen and (max-width: 600px) {
.class-name {
background-color: lightblue;
}
}
Este CSS determina que se a janela tiver 600px ou menos, a cor de fundo do elemnto .class-name será azul (lightblue).
O que é um media query?
Um media query é uma funcionalidade do CSS3 que faz com que a página adapte o seu layout a diferentes tamanhos de ecrã e tipo de media.
Alguns exemplos
Ecrãs com mais de 1024px - Normalmente Desktop
@media screen and (max-width: 1024px) {
}
Ecrãs com mais de 768px mas menos de 1023xp - Tablets
@media screen and (max-width: 768px)
and (max-width:1023px) {
}
Ecrãs com menos de 767px – Smartphones
@media screen and (max-width: 767px) {
}
Estes exemplos resolvem tudo?!
Depende. Estes são apenas 3 exemplos, mas a verdade é que todos os dispositivos têm tamanhos e resoluções diferentes.
A melhor forma de criar páginas responsivas é ir redimensionando a janela do site em que estamos a trabalhar até que algum do conteúdo do mesmo comece a “quebrar” e ficar fora do lugar. É então que inserimos o breakpoint que queremos para corrigir o problema.
Marcações: CSS, Web Design, html, programação, html5