CSS no Lanche

Hoje em dia os mais diversos dispositivos possuem acesso a Internet, e para atender a todos eles pode ser um pouco complicado, mas não se você utilizar Media Queries.

Se você não tem idéia do que são Media Queries, vamos a uma esplicação rápida: Hoje o HTML4 e CSS2 atualmente suportam folhas de estilo dependentes de mídias personalizadas para diferentes tipos de mídia. Por exemplo, um documento pode utilizar fontes sans-serif quando exibido em uma tela e fontes serif quando impresso. ‘Screen’ e ‘print’ são dois tipos de mídia que foram definidos. Media Queries estendem a funcionalidade desses tipos de mídia, permitindo que seja mais precisa a rotulagem das folhas de estilo.

Uma expressão Media Querie consiste em um tipo de mídia e zero ou mais expressões para limitar o alcance das folhas de estilo. Entre as características multimedia que possam ser utilizadas em consultas são os parâmetros ‘width’, ‘height’ e ‘color’. Ao utilizar as Media Queries, os documentos podem ser adaptados a um conjunto específico de dispositivos, sem alterar o conteúdo propriamente dito.

Se quiser uma visão mais ampla sobre o assunto, dê uma olhada nos slides desenvolvidos por Russ Weakley que ilustram bem o assunto:

Quer ver um exemplo na prática? A Microsoft acabou desenvolvendo um exemplo para testar no IE9, que ainda está em desenvolvimento e vai suportar essa feature. Utilize algum browser descente ao visitar esse link e redimensione o browser para ver o resultado.

Leitura recomendada

• How to use CSS3 Orientation Media Queries
• Detecting device size & orientation in CSS
• How to use CSS3 Orientation Media Queries
• Different Stylesheets for Differently Sized Browser Windows