Olá, hoje quero demonstrar o uso de CSS3 Media Queries em conjunto com o framework Less CSS, para trabalhar a estilização de páginas para iOS e Android. Os dispositivos que pretendo utilizar nos meus exemplos são um iPod Touch e um iPad.
Antes de começar, gostaria de deixar claro que podemos utilizar duas formas básicas de uso das CSS3 Media Queries para detectar o dispositivo e suas medidas, a primeira delas é através de folhas de estilos externas e a outra forma é utilizando media queries dentro da folha de estilo global.
Manipulando as CSS de acordo com o navegador e o dispositivo.
O mais importante para se trabalhar com Media Queries é saber as medidas o dispositivo responde, por exemplo o Safari no iPhone responde a media querie max-device-width: 480px já o iPad responde a min-device-width: 768px e max-device-width: 1024px;
DICA: Um pequeno detalhe é que para dispositivos que utilizam Android, este dispositivo tem praticamente as mesmas medidas que o iPhone e aceita o uso de media queries max-device-width: 480px, porém existe um pequeno detalhe, nas versões do Android 2.2 para que essa media querie funcione corretamente é preciso adicionar a metatag viewport veja o link sobre a discussão -> https://code.google.com/p/android/issues/detail?id=11961
Então antes de começar se pretende atingir com o uso de media queries, também dispositivos Android 2.2 ou superior adicione no head do seu HTML a meta tag abaixo:
<meta name="viewport" content="width=device-width" />
Outra dica é para caso você não tenha esses dispositivos em mãos pode-se utilizar a seguinte apicação que emula as diversas telas como iPhone e iPad.
Definindo o uso de folhas de estilo externas com Media Queries.
Se você prefere trabalhar com folhas de estilos separadas em diferentes arquivos, adicione os códigos abaixo no head do seu documento HTML.
<!--[if !IE]>--> <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://example.com/iPhone.css" /> <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="http://example.com/iPad.css" /> <!--<![endif]-->
Neste artigo vou utilizar a segunda forma, pois venho trabalhando muito com sistemas fechados que não me permitem alterar o HTML e é nessas horas que dou graças a Deus por ter começado a aprender CSS usando o princípio do site
CSS Zen Garden - sim um dos meus primeiros testes com CSS foi participando deste desafio, claro que no começo eu tive sérios problemas com os IE Hacks, mas que hoje já não é mais a minha realidade :D.
Definindo o uso de Media Queries dentro da folha de estilo geral.
O bom uso de media queries dentro do arquivo geral de CSS é a economia nas requisições HTTP que o cliente vai executar no servidor, que no meu caso é muito válido pois trabalho em uma loja virtual onde existe um constante crescimento nos acessos e a tendência é que só aumente, então toda economia nas requisições é válida!
Ainda com foco na performance, agora estou falando na performance do meu trabalho, em codar tudo isso, vem o uso da Less CSS para me ajudar a separar em arquivos diferentes os estilos para os dispositivos. Em um
post anterior(Como usar Less CSS no Windows) mencionei uma forma de trabalhar com Less CSS compilando a CSS geral em uma apartir de diferentes arquivos de folha de estilo.
No meu projeto temos uma única folha de estilo que vou chamar de principal.css, é nela que encontra-se toda a formatação do site e vou inserir modularmente a configuração necessária para mobile via Media Queries. As folhas de estilo irei separá-las com os nomes de fone.css e tablet.css, auto-explicativas né?!
Principal.css
É nesse arquivo que eu faço a chamada para os módulos(.css externas), resolvi colocar a importação dos módulos com CSS através da Less assim quando eu compilar os arquivos .less tudo vai se tornar uma única .css.
principal.less:
@import: "normalize";
@import: "libs";
@import: "tablet-fone";
@import: "tablet";
@import: "fone";
fone-tablet.less:
/* tablet/fone [portrait + landscape], uso para configurações que são padrão para os dois dispositivos */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), @media only screen and (max-device-width: 480px) {
CSS
}
tablet.less:
/* tabet[portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
CSS
}
fone.less:
/* fone[portrait + landscape] */
@media only screen and (max-device-width: 480px) {
CSS
}
Bom é isso ae pessoal, espero que ajudem vocês ae!
o/
referências
Comments [0]