Praticamente todos os websites hoje são ou serão acessados por algum smartphone, tablet ou qualquer outro tipo de dispositivo móvel. Portanto, a cada dia aumentam ainda mais os acessos dos websites através destes dispositivos. Para aumentar a complexidade da situação, cada um destes dispositivos possui características muito diferentes uns dos outros… tanto no que diz respeito ao tamanho da tela, resolução do display e até mesmo, na forma de interação com o usuário. Por exemplo, enquanto um notebook possui resolução superior à 1024×768 pixels e normalmente é operado com o mouse (apesar de alguns já possuirem touch screen), em contra partida, um smartphone normalmente tem uma resolução menor e quase sempre é operado através de uma tela touch screen. Obviamente um mesmo website não pode ser acessado pelos dois dispositivos sem que haja alguns ajustes.

Como já havia comentado no post anterior, onde explorei algumas boas estratégias para levar seu website para o mundo mobile, o verdadeiro segredo para fazer estes ajustes é conhecer o CSS3 MediaQueries. Por isso vamos aprofundar mais nos conhecimentos sobre esta técnica.

O que são MediaQueries?

Desde o CSS2, já era possível criar estilos específicos para alguns tipos de mídia, usados mais comumente para diferenciar os estilos de tela – screen e de impressão – print. Mas com o advento do CSS3, temos muitas outras possibilidades de detectar os vários tipos de media com a introdução das Media Queries, pois com elas, nós somos capazes de consultar o navegador do usuário e verificar vários detalhes do dispositivo que o usuário está usando para acessar um site, permitindo que especifiquemos estilos diferentes para cada uma delas.

Como usar?

São basicamente 3 passos:

  1. Definir a TAG ViewPort para impedir a “miniaturização” do site em telas menores.
  2. Criar uma estrutura inteligente de HTML (prevendo as principais alteraçãos possíveis).
  3. Construir as regras de Media Queries para as diferentes capacidades de tela.

Viewport

A Viewport é a área disponível para o conteúdo do site. O problema é que mesmo tendo telas de 320 ou 480px de largura os navegadores dos dispositivos móveis são capazes de mostrar sem problemas uma página web inteira, mesmo que ela tenha sido feita originalmente para resoluções de 1024px de largura. Eles conseguem isto criando uma espécie de “zoom out” na página até que ela caiba na tela. Daí o usuário precisa fazer uso de um “zoom in” e “arrastar” a página pela tela para ver o site em tamanho real.

Impedimos que o browser faça isso, setando esta tag no head do corpo HTML.

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Tipos de regras

Existem várias variáveis disponíveis para criarmos as regras. As mais comuns delas são max-width e min-width . Elas definem os limites das dimensões da área disponível do dispositivo e usando apenas estas variáveis já é possível definir várias faixas de resoluções do nosso site e atender a praticamente todo tipo de tela. Vamos ver um exemplo:

//Arquivo styles.css

/* Tamanho padrão */

.container {
    width: 940px;
    margin: 0 auto;
}
.menu {
    width: 300px;
    float: left;
}
.content {
    margin-left: 20px;
    width: 620px;
    float: left;
}

/* Tela de no máximo 480 pixels de largura */
@media (max-width: 480px) {
    .container {}
    .menu {}
    .content {}    
}
/* Tela de no máximo 768 pixels de largura */
@media (max-width: 768px) { 
    .container {}
    .menu {}
    .content {}    
}
/* Tela de no mínimo 768 pixels e no máximo 980 pixels */
@media (min-width: 768px) and (max-width: 980px) { 
    .container {}
    .menu {}
    .content {}    
}
/* Tela de no mínimo 1200 pixels de largura */
@media (min-width: 1200px) { 
    .container {}
    .menu {}
    .content {}    
}

Veja que temos classes definidas fora das regras de media queries. Eu defini classes padrão, pois browsers mais antigos… como o IE8 e antecessores, não suportam esse recurso e lêem as classes fora das media queries.

Para que você não precise ficar quebrando a cabeça fazendo contas e pesquisas sobre os mais diferentes tipos de tela e comece de uma vez a focar na criação do seu CSS. Segue uma lista de várias media queries para os tipos mais comuns de dispositivos que encontrei neste site.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Demo

Montei um exemplo bem enxuto da aplicação destas media queries que você pode baixar aqui.

div-media-query-site

980px ou superior

480px de largura

480px de largura