Media Queries e Compatibilidade

Em uma postagem anterior escrev sobre o design responsivo e o desafio de criar

sites para dispositivos mveis (que voc pode conferir aqui). Como prometido,
chegou a hora de voltarmos ao assunto! Hoje, darei nfase s Media Queries, um
assunto interessante e que ainda intriga alguns iniciados no assunto.
Relembrando: o que so Media Queries mesmo?
Media Queries, ou Consultas de Mdia, so expresses CSS que so utilizadas para
mudar o layout de um site sem mudar o contedo em diferentes aparelhos. Com
o auxlo delas, possvel no verificar apenas o tipo do dispositivo, mas tambm
sua capacidade. Poderamos comparar o processo como poder fazer uma pergunta
para o browser e obter uma resposta, para ter um controle maior sobre o layout e
checar coisas como: a largura e a altura do browser, a orientao e a resoluo do
dispositivo, entre outras importantes informaes.
Talvez voc est pensando que isso uma grande novidade, mas engana-se: o
CSS2 j possua uma funo chamada Media Type que servia para reconhecer o
tipo de dispositivo que estava acessando o site. Os Media Queries so uma espcie
de aperfeioamento das Media Types feitas no CSS3.
Lista com as 10 funes das Media types (em ordem alfabtica):

all para o reconhecimento de todos os tipos de dispositivos

aural para sintetizadores de voz

braille para leitores de Braille

embossed para impressoras de Braille

handheld para dispositivos de mo, como celulares de telas reduzidas

print para impressoras comuns

projection para apresentaes de slides

screen para monitores

tty para teleimpressores e terminais

tv para televisores

E como essas funes eram usadas no cdigo? Para dar um exemplo, imagine que
voc quisesse determinar um estilo diferente para a visualizao do seu site em um
dispositivo handheld. Basicamente, para fazer isso, voc acrescentava um link para
essa outra folha de estilos no cabealho do documento:
?

<link rel="stylesheet" media="handheld" href="handheld.css" />

Ou utilizando um CSS unificado com a funo @media:

?
1

@media handheld {

2
3

/* estilos */
}

O problema que com a evoluo da maioria dos aparelhos, alguns dispositivos,

como a maioria dos Smartphones, por exemplo, passaram a no se encaixar mais
em nenhuma destas categorias, j que possuem uma tela e uma resoluo bem
diferentes dos celulares handheld e isso sem falar nos Tablets, que vieram para
diversificar mais ainda!
Os parmetros
As Media Features, como defin acima, so como uma lista de perguntas que voc
pode fazer para o browser e se parecem muito com as propriedades de CSS que
voc j conhece. Cada uma tem um nome e aceita determinados valores, como
voc ver a seguir:

Width
Largura da janela do navegador incluindo a sua barra de rolagem.
Valor: as medidas de comprimento dessa janela. Aceita valores para tamanho
mnimo e mximo (min/max).

Height
Altura da janela do navegador, incluindo a a barra de rolagem.
Valor: as medidas de comprimento dessa janela. Aceita valores para tamanho
mnimo e mximo (min/max).

Device-width
Largura da mdia ou o prprio tamanho da tela, ou o tamanho da folha no caso de
uma impresso.

Valor: medidas de comprimento. Aceita valores para tamanho mnimo e mximo

(min/max).

Device-height
Altura da mdia.
Valor: medidas de comprimento.
Aceita valores para tamanho mnimo e mximo (min/max)

Orientation
Orientao da mdia.
Valor: portrait (retrato) ou landscape (paisagem)
No aceita parmetros de min/max.
Aspect-ratio
Relao entre os valores de width e height para a proporo, aplicveis apenas a
mdias do tipo bitmap. No aceita parmetros de min/max.

Device-aspect-ratio
A proporo da tela do dispositivo. No aceita parmetros de min/max.
Exemplo de aplicao:
?
1

@media screen and (device-aspect-ratio: 16/9) {

2
3

/* estilos */
}

Color
Nmero de bits por cor. Se valor = 0 o dispositivo ser considerado monocromtico.
Valor: numrico. Aceita parmetros de min/max.

Color-index
Nmero de entradas na tabela de pesquisa de cores do dispositivo de sada. Se o
dispositivo no utiliza uma tabela de pesquisa de cor, ento valor =0.
Valor: numrico
Aceita parmetros de min/max.
Monochrome
Este recurso de mdia descreve o nmero de bits por pixel em um buffer de quadros
monocromticos. Se o dispositivo no monocromtico, o valor ser 0.
Valor: numrico
Aceita parmetros de min/max.

Resolution
Resoluo do dispositivo (densidade por pixel). Aplicvel apenas a mdias do tipo
bitmap.
Valor: nmero em DPI ou DCM. Aceita parmetros de min/max.

Scan
Tipo de formao de imagens especifico para televisores.
Valor: progressive (progressivo) ou interlace (entrelaado)
No aceita parmetros de min/max.

Grid
Determina se o dispositivo baseado em bitmap ou em um grid de dispositivo, no
possuindo relao com o grid do design.
Valor: Se o dispositivo de sada baseada em Grid o valor ser 1. Caso contrrio, o
valor ser 0. No aceita parmetros de min/max.

Resoluo de tela: de olho nela!

Se voc quiser desenvolver um estilo CSS tendo um dispositivo especfico em
mente, voc vai precisar saber a resoluo da tela, ou seja, sua altura e largura em
pixels. Se voc deseja adapt-lo a uma gama maiores de aparelhos precisar fazer

algumas especificaes para determinar quais vo sero os pontos do seu layout

que sofrero algum tipo de transformao. Para isto, considere as seguintes
larguras abaixo:

320 pixels - Smartphones no modo retrato.

480 pixels - Smartphones no modo paisagem.

600 pixels - Tablets pequenos. Ex: Amazon Kindle (600800)

768 pixels - Tablets maiores em modo retrato. Ex: iPad (7681024)

1024 pixels - Tablets maiores em modo paisagem, monitores antigos.

1200 pixels - Monitores wide.

Alguns exemplos
O iPhone da Apple em modo retrato possui 320px de width. Se voc desenvolver
um CSS para esse modelo de smartphone, dever utilizar a seguinte Media Querie:
?
1

/* Smartphone em modo retrato */

@media only screen and (max-width : 320px) {

3
4

/* estilos */
}

Com esse cdigo, como se voc estivesse perguntando para o browser: O seu
dispositivo uma tela e a largura mxima dela de 320 pixels?. Se a resposta for
um sim o navegador aplica os estilos. Interessante, no? Agora, se voc quiser
determinar os estilos de um iPad independente da orientao, deve usar esta Media
Querie:
?
1

/* iPads (restrato e paisagem) */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

5
6

/* estilos */
}

 claro que estas so apenas algumas opes e voc pode realizar inmeras
possibilidades de combinao. Um bom exemplo de aplicao utilizar um
container e ir variando a max-width de acordo com a resoluo da tela. Assim voc
poder garantir que o contedo responda a diferentes tipos de dispositivos!
Uma boa ferramenta para testar os pontos de quebra do seu layout
o Responsivepx. Com ele, voc poder visualizar o site e ir diminuindo e
aumentando a rea de corte at perceber em qual ponto aparecer algum problema
e usar um media query para arrumar o que quiser.
Espero que essa postagem tenha ajudado a esclarecer algumas dvidas sobre o
assunto, ou mesmo matar sua curiosidade. Em posts futuros, continuaremos
falando mais sobre este assunto, revelando dicas, indicando plugins e as melhores
solues para o seu design de sites e muitos outros. At a prxima!