MENU

Responsive – Usando Media Queries CSS

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, 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 às configurações de seu dispositivo, para que eles proporcionem 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:

1
<link rel="stylesheet" media="handheld" href="estilo.css" type="text/css">

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:

1
<link rel="stylesheet" media="(max-width: 480px)" href="estilo.css" />

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@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

Leave a Comment!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *