Scroll to top
Estúdio Criativo Kuumba
Share

Design Responsivo com CSS3 Media Queries

Mas o que são Media Queries?

A CSS2 nos permite criar estilos específicos para alguns tipos de mídia, tais como: screen (tela) e print (impressão). Agora com a CSS3, as possibilidades foram ainda mais ampliadas, com a introdução das Media Queries. Traduzindo, “Media Queries” são “Consultas de Mídia”, ou seja, a CSS é capaz de consultar o navegador e verificar em que tipo de mídia ou dispositivo o usuário está usando para acessar um site, permitindo assim, que especifiquemos estilos diferentes para cada tipo de mídia. Esta consulta ocorre em tempo real — o que é muito bacana. Você poderá ver os estilos mudarem no momento em que for redimensionando o seu navegador, além do simples acessar de um site no PC ou no celular.

Max Width

O código CSS abaixo será aplicado se o tamanho da área de visão for menor que 600px

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Se você quiser criar um arquivo de estilos separados, pode usar o código abaixo, colocando-o entre <head> </head>

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width

O código CSS abaixo será aplicado se o tamanho da área de visão for maior que 900px.

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Múltiplas Media Queries

Você pode combinar múltiplas media queries numa mesma expressão. O código abaixo será aplicado se o tamanho da área de visão estiver entre 600px e 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

O código abaixo será aplicado se o max-device-width for 480px (por exemplo, iPhone). Observe que max-device-width significa a resolução real do dispositivo e max-width significa a resolução de área de visualização.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

Para o iPhone 4

O seguinte stylesheet é especificamente para iPhone 4.

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Para iPad

Você também pode usar Media Queries para detectar a orientação do dispositivo (retrato ou paisagem).

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

As Media Queries e o Internet Explorer

Infelizmente, as Media Queries não são suportadas no Internet Explorer 8 ou inferior. Para contornar este problema, você pode usar Javascript. Abaixo estão algumas soluções:

Se você já está trabalhando com HTML5, pode também utilizar este recurso:

Por exemplo:

Utilize “Conditional Comments” para determinar que um arquivo será executado apenas no navegador especificado.

<!--[if lt IE 9]>
  <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Conclusão

Lembre-se: Ter estilos otimizados para dispositivos móveis não significa que seu site está optimizado para dispositivos móveis. Para ser verdadeiramente otimizado para tal, suas imagens, html, css e js precisam ser otimizados também, diminuindo seu peso para que haja um carregamento mais rápido. As Media Queries são destinadas à apresentação do layout, não à otimização.

Related posts

Post a Comment

O seu endereço de e-mail não será publicado.