Bom, antes de iniciarmos o aprendizado sobre Media Queries, precisamos entender o que so Media Types.

O que so Media Types? O Css pode ser usado para especificar como o documento ser exibido em diferentes tipos de mdias como celulares, desktop e impressos. Existem dez tipos de media types definidas em Css 2.1, so elas:

Existem 5 mtodos que podem ser usados para especificar as media types, so elas:

Os mtodos mencionados acima so utilizados tambm nas media queries.Bem, mas o que so media queries? Vamos entend-las!

DEFININDO MEDIA QUERIES Por um longo tempo temos sido capazes te especificar estilos para diferentes tipos de mdia usando Css, sendo os print e screen os mais reconhecidos.Com CSS3 essas media types foram extendidas, permitindo novas expresses.So as chamadas media queries, que nos d grande controle quando precisamos adicionar estilos especficos para visualizao em determinados tipos de dispositivos.

As medias queries geralmente consistem de uma media type e nenhuma ou muitas palavras-chave, como por exemplo:

[code lang="php"][/code]

ENTENDENDO UM POUCO SOBRE MEDIA FEATURES Sintaticamente, as media features assemelham-se s propriedades CSS.Elas possuem nomes e aceitam certos valores.Existem, contudo, diversas diferenas importantes entre as propriedades e as media features.So elas:

Propriedades so usadas em declaraes para dar informaes sobre como apresentar um documento.Media features so usadas em expresses para descrever requisitos da sada do dispositivo.

A maioria das medias features aceitam os prefixos -min ou -max para expressar maior ou igual a e menor ou igual a.Esta sintaxe usada para evitar

Propriedades sempre exigem um valor para formar uma declarao.Media features, por outro lado, tambm podem ser utilizados sem um valor.Media features que so precedidos por min/mas no podem ser utilizados sem um valor.Quando uma media feature possui o prefixo min/max sem um valor, isso torna a media query disforme.

Propriedades podem aceitar valores mais complexos, clculos que envolvem diversos outros valores.Media features somente aceitam valores nicos: uma palavra chave, um nmero ou um nmero com um nico identificador.As nicas excees so aspect-ratio e device-aspect-ratio.

Exemplo: color pode formar expresses sem valor -> ((color)) ou com valor -> ((min-color: 1)).

Abaixo segue uma lista completa de todas as media features:

USANDO MLTIPLAS EXPRESSES Voc pode usar mltiplas expresses em uma media query se voc junt-las com a palavra-chave and.

Um exemplo claro se formos aplicar para dispositivos do tipo hand-held, mas somente se a largura da rea de visualizao for maior que 20em e menor que 40 em.

<link rel="stylesheet" type="text/css" href="estilo.css" media="handheld and (minwidth:20em) and (max-width:40em)">

USANDO MLTIPLAS EXPRESSES MEDIA QUERIES

possvel usar mltiplas declaraes media queries separando-as por vrgula. Exemplo:

<link rel="stylesheet" type="text/css" href="estilo.css" media="screen and (color), handheld and (color)">

USANDO O NOT

possvel utilizar a palavra not caso queira ignorar algum dispositivo. Exemplo:

<link rel="stylesheet" type="text/css" href="estilo.css" media="not screen and (color)">

USANDO O ONLY

possvel usar a palavra only para aplicar as regras somente para as media queries determinadas.

SUPORTE PARA MEDIA QUERIES As media queries no so suportadas para IE8 e inferiores. So suportadas para :

Firefox 3.6+ Safari 4 Opera 10 Chrome 5

Vale ressaltar que os browsers que no suportam as media queries podem suportar as medias types. A keyword only algumas vezes usada para esconder o CSS de alguns dispositivos que no suportam media queries, mas podem ler as media types.

MEDIA QUERIES EM IPHONES O iphone no suporta a media type handheld.A Apple recomenda que as media queries sejam usadas para Iphone. As regras sero aplicadas para Iphone que tem uma largura mxima de dispositivo de 480px.

<link rel="stylesheet" type="text/css" href="estilo.css" media="only screen and (maxdevice-width:480px)">