Media Queries e Compatibilidade

Media Queries e Compatibilidade Em uma postagem anterior escreví sobre o design responsivo e o desafio de criar sites para dispositivos móveis (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 são Media Queries mesmo? Media Queries, ou “Consultas de Mídia”, são expressões CSS que são utilizadas para mudar o layout de um site sem mudar o conteúdo em diferentes aparelhos. Com o auxílo delas, é possível não verificar apenas o tipo do dispositivo, mas também sua capacidade. Poderíamos 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 orientação e a resolução do dispositivo, entre outras importantes informações. Talvez você está pensando que isso é uma grande novidade, mas engana- se: o CSS2 já possuía uma função chamada Media Type que servia para reconhecer o tipo de dispositivo que estava acessando o site. Os Media Queries são uma espécie de aperfeiçoamento das Media Types feitas no CSS3. Lista com as 10 funções das Media types (em ordem alfabética): 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 mão, como celulares de telas reduzidas print – para impressoras comuns projection –para apresentações de slides screen – para monitores tty – para teleimpressores e terminais tv – para televisores E como essas funções eram usadas no código? Para dar um exemplo, imagine que você quisesse determinar um estilo diferente para a visualização do seu site em um dispositivo handheld. Basicamente, para

Upload
ronaldo-nunes
Category

Documents
view
223
download
9

Embed Size (px):

description

Texto para o Blog do Web design da Microcamp

Transcript of Media Queries e Compatibilidade

Media Queries e CompatibilidadeEm uma postagem anterior escrev sobre o design responsivo e o desafo de criar sites para dispositivos mveis (que voc pode conferir aqui). Como prometido, chegou a hora de voltarmos ao assunto !o"e, darei nfase #s $edia %ueries, um assunto interessante e que ainda intriga alguns iniciados no assunto. &elembrando' o que s(o $edia %ueries mesmo)$edia %ueries, ou *Consultas de $dia+, s(o e,press-es C.. que s(o utili/adas paramudar o layout de um site sem mudar ocontedo em diferentes aparelhos. Com o au,lo delas, 0 possvel n(o verifcar apenas o tipo do dispositivo, mas tamb0m sua capacidade. 1oderamos comparar o processo como poder fa/er uma pergunta para o bro2ser e obter uma resposta, para ter um controle maior sobre o la3out e checar coisas como' a largura e a altura do bro2ser, a orienta4(o e a resolu4(o do dispositivo, entre outras importantes informa4-es.5alve/ voc est6 pensando que isso 0 uma grande novidade, mas engana7se' o C..8 "6 possua uma fun4(o chamada $edia 53pe que servia para reconhecer otipo de dispositivo que estava acessando o site. 9s $edia %ueries s(o uma esp0cie de aperfei4oamento das $edia 53pes feitas no C..:. ;ista com as