Introdução sobre Media Queries
Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.
Breve explicação sobre Media Types
As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:
Todos os nomes das medias são case-sensitive.
A utilização dessas medias são feitas como o código abaixo:
Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.
O Problema
Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.
A Solução – Media Queries
As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.
Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?
Operadores Lógicos
Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only.
O not irá fazer uma sentença de negação. Por exemplo:
Sentenção verdadeira para dispositivos monocromáticos.
O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:
É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.
Media features
Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:
Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.
Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser.
As media queries também são case-sensitive.
Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.
Fonte:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Media Queries é a utilização de Media Types com uma ou mais expressões envolvendo características de uma media para definir formatações para diversos dispositivos. O browser ou a aplicação lê as expressões definidas na query, caso o dispositivo se encaixe nestas requisições, o CSS será aplicado.
Breve explicação sobre Media Types
As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:
- 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.
Todos os nomes das medias são case-sensitive.
A utilização dessas medias são feitas como o código abaixo:
- Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Exemplo</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld" />
</head>
<body>
</body>
</html>
Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.
- Código:
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen" />
O Problema
Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.
A Solução – Media Queries
As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.
- Código:
<link rel="stylesheet" href="estilo.css" media="screen and (color)" />
Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?
Operadores Lógicos
Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only.
O not irá fazer uma sentença de negação. Por exemplo:
- Código:
<link rel="stylesheet" href="estilo.css" media="all and (not color)" />
Sentenção verdadeira para dispositivos monocromáticos.
O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:
- Código:
<link rel="stylesheet" href="estilo.css" media="only screen and (color)" />
É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.
- Código:
<link rel="stylesheet" href="estilo.css" media="screen and (color), projection and (color)" />
Media features
Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:
- Código:
<link rel="stylesheet" href="estilo.css" media="screen and (max-width:480px)" />
Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.
Há uma lista de características que você pode utilizar aqui 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
As media queries também são case-sensitive.
Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.
Fonte:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
