anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

CSS3, Media Queries e compatibilidade para dispositivos móveis

banner media queries

Já aprendemos mais sobre o design responsivo e o desafio atual de criar sites para dispositivos móveis. E como havia prometido, chegou a hora de voltarmos ao 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ílio delas, é possível verificar o tipo do dispositivo e também sua capacidade. Poderíamos comparar o processo como programar o documento para fazer uma pergunta ao browser e obter uma resposta, para ter um controle maior sobre o layout e checar coisas como a largura e a altura do browser do dispositivo, a orientação e a resolução utilizadas, entre outras importantes informações.

Muitos pensam que o recurso é uma grande novidade, mas enganam-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. Podemos afirmar que os Media Queries são uma espécie de aperfeiçoamento no CSS3 das Media Types.

Veja a seguir uma lista com as 10 funções das Media types existentes anteriormente (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? Bom, 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 fazer isso, você acrescentava um link para essa outra folha de estilos no cabeçalho do documento:

link

Ou utilizando um CSS unificado com a função @media:

função media

O problema é que com a evolução da maioria dos aparelhos, alguns dispositivos (como a maioria dos Smartphones, por exemplo), passaram a não se encaixar mais em nenhuma dessas categorias, já que possuem uma tela e uma resolução bem diferentes dos celulares handhelds… isso sem falar nos Tablets, que vieram para diversificar as opções mais ainda!

Os parâmetros

As Media Features, como definí acima, são como uma lista de perguntas que você pode fazer para o browser e se parecem muito com as propriedades de CSS que você já conhece. Cada uma tem um nome e aceita determinados valores, como você verá a seguir:

Width: Largura da janela do navegador incluindo aí sua barra de rolagem. Valor: as medidas de comprimento dessa janela. Aceita valores para tamanho mínimo e máximo (min/max).

Height: Altura da janela do navegador, incluindo aí a barra de rolagem. Valor: as medidas de comprimento dessa janela. Aceita valores para tamanho mínimo e máximo (min/max).

Device-width: Largura da mídia ou o próprio tamanho da tela, ou o tamanho da folha no caso de uma impressão. Valor: medidas de comprimento. Aceita valores para tamanho mínimo e máximo (min/max).

Device-height: Altura da mídia. Valor: medidas de comprimento. Aceita valores para tamanho mínimo e máximo (min/max).

Orientation: Orientação da mídia. Valor: portrait (retrato) ou landscape (paisagem). Não aceita parâmetros de min/max.

Aspect-ratio: Relação entre os valores de ‘width’ e ‘height’ para a proporção, aplicáveis apenas a mídias do tipo bitmap. Não aceita parâmetros de min/max.

Device-aspect-ratio:  A proporção da tela do dispositivo. Não aceita parâmetros de min/max.

Exemplo de aplicação:

proporção

Color: Número de bits por cor. Se valor = 0, o dispositivo será considerado monocromático.

Valor: numérico. Aceita parâmetros de min/max.

Color-index: Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, então valor =0. Valor: numérico. Aceita parâmetros de min/max.

Monochrome: Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é monocromático, o valor será 0. Valor: numérico. Aceita parâmetros de min/max.

Resolution: Resolução do dispositivo (densidade por pixel). Aplicável apenas a mídias do tipo bitmap.

Valor: número em DPI ou DCM. Aceita parâmetros de min/max.

Scan: Tipo de formação de imagens especifica para televisores. Valor: progressive (progressivo) ou interlace (entrelaçado). Não aceita parâmetros de min/max.

Grid: Determina se o dispositivo é baseado em bitmap ou em um grid de dispositivo, não possuindo relação com o grid do design. Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Não aceita parâmetros de min/max.

Resolução de tela: de olho nela!

Se você quiser desenvolver um estilo CSS tendo um dispositivo específico em mente, você vai precisar saber a resolução da tela do aparelho, ou seja, sua altura e largura em pixels. Se você deseja adaptá-lo a uma gama maiores de aparelhos precisará fazer algumas especificações para determinar quais serão os pontos do seu layout que sofrerão algum tipo de transformação. Para isto, considere as seguintes larguras abaixo:

320 pixels – Smartphones no modo retrato.

480 pixels – Smartphones no modo paisagem.

600 pixels – Tablets pequenos. Ex: Amazon Kindle (600×800)

768 pixels – Tablets maiores em modo retrato. Ex: iPad (768×1024)

1024 pixels – Tablets maiores em modo paisagem, monitores antigos.

1200 pixels – Monitores wide.

Alguns exemplos

O iPhone da Apple em modo retrato possuía 320px de width (largura). Se você desenvolver um CSS para esse modelo de smartphone, deverá utilizar a seguinte Media Querie:

iphone querie

Com esse código, é como se você estivesse perguntando para o browser: “O seu dispositivo é uma tela e a largura máxima dela é de 320 pixels?”. Se a resposta for um “sim” o navegador aplica os estilos. Interessante, não? Agora, se você quiser determinar os estilos de um iPad independente da orientação, deve usar esta Media Querie:

iphone querie

É claro que estas são apenas algumas opções e você pode realizar inúmeras possibilidades de combinação. Um bom exemplo de aplicação é utilizar um container e ir variando a max-width de acordo com a resolução da tela. Assim você poderá garantir que o conteúdo responda a diferentes tipos de dispositivos!

Espero que esse texto tenha ajudado a esclarecer algumas dúvidas sobre o assunto, ou mesmo saciar sua curiosidade. Em posts futuros, continuaremos falando mais sobre este assunto, revelando dicas, indicando plugins e as melhores soluções para o seu design de sites e muitos outros. Até a próxima!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.