Introdução às Media Queries – CSS
Bom, antes de iniciarmos o aprendizado sobre Media Queries, precisamos entender o que são Media Types.
O CSS pode ser usado para especificar como o documento será exibido em diferentes tipos de mídias, tais como celulares, desktop e impressos.
Existem dez tipos de media types definidas na especificação CSS 2.1. São elas:
Existem 5 métodos que podem ser usados para especificar as media types. São eles:
Os métodos mencionados acima são utilizados também nas media queries. Bem, mas o que são media queries? Vamos entendê-las!
Por um longo tempo temos sido capazes te especificar estilos para diferentes tipos de mídia usando CSS, sendo os “print” e “screen” os mais reconhecidos. Com CSS3 essas media types foram extendidas, permitindo novas expressões. São as chamadas “media queries”, que nos dão grande controle quando precisamos adicionar estilos específicos para visualização em determinados tipos de dispositivos.
As medias queries geralmente consistem de uma media type e nenhuma ou muitas palavras-chave, como por exemplo:
Sintaticamente, as media features assemelham-se às propriedades CSS. Elas possuem nomes e aceitam certos valores. Existem, contudo, diversas diferenças importantes entre as propriedades e as media features. São elas:
Propriedades são usadas em declarações para dar informações sobre como apresentar um documento. Media features são usadas em expressões para descrever requisitos da saída 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 evitarPropriedades sempre exigem um valor para formar uma declaração. Media features, por outro lado, também podem ser utilizados sem um valor. Media features que são precedidos por min/max não 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, cálculos que envolvem diversos outros valores. Media features somente aceitam valores únicos: uma palavra chave, um número ou um número com um único identificador. As únicas exceções são “aspect-ratio” e “device-aspect-ratio”.Exemplo: “color” pode formar expressões sem valor -> (“(color)”) ou com valor -> (“(min-color: 1)”).
Abaixo segue uma lista completa de todas as media features:
Você pode usar múltiplas expressões 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 visualização for maior que 20em e menor que 40 em.
É possível usar múltiplas declarações media queries separando-as por vírgula.
Exemplo:
É possível utilizar a palavra “not” caso queira ignorar algum dispositivo.
Exemplo:
É possível usar a palavra “only” para aplicar as regras somente para as media queries determinadas.
As media queries não são suportadas para IE8 e inferiores, somente para:
Firefox 3.6+Safari 4Opera 10Chrome 5Vale ressaltar que os browsers que não suportam as media queries podem suportar as medias types.
A keyword “only” é, algumas vezes, usada para esconder o CSS de alguns dispositivos que não suportam media queries, mas podem ler as media types.
Media Queries em iPhones
O iPhone não suporta a media type handheld. A Apple recomenda que as media queries sejam usadas para Iphone.
Exemplo: as regras serão aplicadas para iPhone que tem uma largura máxima de dispositivo de 480px.
Fonte: Blog Virtualize
Profissional Web, trabalha desenvolvendo sites em Xhtml e Css utilizando os padrões W3C.Utiliza o Wordpress como gerenciador de conteúdo, desenvolvendo temas específicos para o mesmo.Atualmente estuda Ciência da Computação na UFBA (Universidade Federal da Bahia)
0 comments:
Post a Comment