Antigamente existiam somente computadores Desktop e Notebooks com resoluções parecidas, 60x480, 800x600, 1024x600 e assim por diante. Com o tempo foram surgindo placas de vídeo melhores, monitores de diversos tamanhos e os sites começaram a ficar estranhos e mal acomodados em diversas resoluções.
Nos últimos 10 anos, os Smartphones e Tablets foram popularizados, trazendo diversos dispositivos com incontáveis resoluções de tela, menores que as telas dos computadores Desktop. Outros dispositivos como TVs e Projetores também começaram a fazer parte de uma extensa lista de dispositivos.
Para isso, o HTML trouxe os Media Types que definiam para qual dispositivo um CSS seria aplicado. Com este é possível definir por exemplo, um CSS somente para impressão, onde podemos retirar imagens de fundo e cores fortes para que o usuário possa realizar uma impressão gastando menos tinta ou deixando a impressão mais legível.
Um outro Media Type aplicaria um CSS a TVs, ou Projetor ou um Handheld, como eram conhecidos os dispositivos móveis do momento, normalmente os PDAs.
Antigamente existiam somente computadores Desktop e Notebooks com resoluções parecidas, 60x480, 800x600, 1024x600 e assim por diante. Com o tempo foram surgindo placas de vídeo melhores, monitores de diversos tamanhos e os sites começaram a ficar estranhos e mal acomodados em diversas resoluções.
Nos últimos 10 anos, os Smartphones e Tablets foram popularizados, trazendo diversos dispositivos com incontáveis resoluções de tela, menores que as telas dos computadores Desktop. Outros dispositivos como TVs e Projetores também começaram a fazer parte de uma extensa lista de dispositivos.
Para isso, o HTML trouxe os Media Types que definiam para qual dispositivo um CSS seria aplicado. Com este é possível definir por exemplo, um CSS somente para impressão, onde podemos retirar imagens de fundo e cores fortes para que o usuário possa realizar uma impressão gastando menos tinta ou deixando a impressão mais legível.
Um outro Media Type aplicaria um CSS a TVs, ou Projetor ou um Handheld, como eram conhecidos os dispositivos móveis do momento, normalmente os PDAs.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
Esta regra também pode ser adicionada dentro do próprio arquivo CSS:
@viewport {
width: device-width;
zoom: 1;
initial-scale= 1;
}
Abaixo segue uma lista de propriedades que podem ser utilizadas:
- width e height: faz com que a página se comporte como se o navegador tenha exatamente este tamanho de largura (width) ou altura (height), podendo ser em pixels ou até mesmo se adequar ao tamanho da tela do aparelho utilizando o devide-width ou device-height.
- initial-scale: refere-se ao zoom inicial da página, normalmente iniciada em 1 para o zoom padrão.
- user-scalabe, maximum e minimun-scale: refere-se ao tanto de zoom máximo e mínimo que o usuário possa aplicar na página. Pode-se definir que ele não possa aplicar zoom com o user-scalabe: no.
Mais exemplos no site do Opera
As regras podem ser adicionadas nas TAGs links ou dentro do próprio CSS.
No caso de aplicado na TAG Link, podemos separar CSSs diferentes para cada tela, um para mobile e um para Desktops por exemplo. Ou fazer um CSS para Desktop e adicionar as regras para telas menores no próprio arquivo.
Abaixo exemplo de como adicionar uma regra na TAG link:
<link rel="stylesheet" href="mobile.css" media="max-width: 480px">
A regra acima define que este CSS só será aplicada se o dispositivo ou tela chegar ao máximo de 480px.
Abaixo as regras mais utilizadas:
- width
- height
- device-width
- device-height
- orientation
- aspect-ratio
- device-aspect-ratio
As regras ou expressões acima são conhecidas como media features. Note que existem regras parecidas como width e device-width, a primeira é relacionada ao tamanho da resolução da tela e a segunda é relacionada ao tamanho real da tela do dispositivo. Por exemplo, modelos de iPhone conseguem renderizar páginas como em um Desktop, porém a sua resolução de device-width é de 480px.
As expressões retornam sempre verdadeiro ou falso. Caso o resultado dela seja verdadeiro ela executa o que foi informado, no caso do exemplo, ele irá inserir o mobile.css somente se esta tela tiver width máximo de 480px.
Podemos utilizar operadores lógicos AND, NOT e OR para compor nossas regras, como demonstra o exemplo abaixo:
@media (min-width: 700px) and (orientation: landscape)