Usar Media Queries para layout responsivo

Olá pessoal, hoje vamos falar de Media Queries, que essencial para sites com template responsivos. você sabe o que é?

O que é um site responsivo

Bom, sabemos que hoje a maioria dos sites são responsivos, você já deve pelo menos ter ouvido isso em algum lugar, mas poucos sabem o que é um site assim. Tem se crescido o uso de aparelhos móveis e seu acesso a internet, muitas pessoas preferem usar o celular para acessar e-mail, redes sociais, ver notícias e visitar outros sites. Por isso é importante que os sites saibam se adaptar à necessidade de cada usuário e as configurações de seu dispositivo, para que eles tenham uma experiência única a cada pessoa.

Media Types

Media Types serve para definir para qual tipo de dispositivo ou mídia o CSS será direcionado, é usado na linkagem do arquivo .css, e é uma boa opção para a responsividade.

Abaixo segue uma lista das medias, que devem ser escritos em caixa baixa, ou seja, são case-sensitive:

all

Para todos os dispositivos.

braille

Para dispositivos táteis.

embossed

Para dispositivos que “imprimem” em braille.

handheld

Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print

Para impressão em papel.

projection

Para apresentações, como PowerPoint.

screen

Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.

speech

Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

tty

Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tv

Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

Veja a abaixo um exemplo de uso de Media Types:

Neste caso, como visto a cima, o arquivo estilo.css só será aberto se o dispositivo de onde a página está sendo acessada for um celular, ou dispositivo móvel.

Problema do Media Type

O problema é que estão surgindo novos dispositivos com acesso a internete. Dispositivos que as vezes são móveis, mas tem capacidade de tela semelhante ou equivalente ao Desktop, ou seja, o uso do Media Type handehld pode não ser a melhor opção.

Media Queries, a grande solução

As Media Queries definem de forma mais especifica as condições de utilização de um arquivo CSS, podendo ser usado tanto na linkagem do arquivo, como no próprio arquivo. Com uso de operadores lógicos e features, proporciona que o arquivo seja aberto ou trecho interpretado somente por dispositivos que atendem a condições lógicas e os tamanhos pré definidos. Veja um exemplo de uso de Media Querie na linkagem:

No exemplo a cima, o CSS só será aberto e interpretado, se a tela do dispositivo for screen e o tamanho do navegador for menor que 480px, caso seja maior não será aberto.
Exemplo de Media Queries no arquivo .css:

@media screen and (min-width:769px){
body{
background: red;
}
}
@media screen and (max-width:768px) and (min-width:481px){
body{
background: blue;
}
}
@media screen and (max-width: 480px){
body{
background: green;
}
}

O código a cima é ideal para um site responsivo, quando se tem foco em Desktop, por isso o mínimo de 769px, Tablet , com máximo de 768 e mínimo de 481 pixels, e Celular com o máximo de 480 pixels.
Há uma lista de características que você pode utilizar em Media Querie para selecionar os dispositivos que você quiser.
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome
resolution
scan
grid