Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela

Veja como utlizar as consultas de mídias para aplicação do web design responsivo

media queries

Eae, tudo bele?

Não tem para onde fugir! A maioria dos clientes hoje em dia quando pensam em construir um site já desejam que o mesmo seja acessado pelo celular, tablet e outros diversos dispositivos que temos por aí. E eles tem razão em querer isto, pois segundo dados da 27º Pesquisa Anual de Administração e uso da Tecnologia nas Empresas realizada pela Fundação Getúlio Vargas, a projeção de celulares em uso chegará a 236 milhões até 2018.

E é aí que o design responsivo vem como importante conceito na hora de pensar em construir sites para diferentes dispositivos e resoluções de telas. Se você é leitor assíduo do blog é bem provável que já tenha um conhecimento prévio sobre o assunto caso tenha baixado nosso E-book de Design Responsivo (se ainda não fez,  CLIQUE AQUI e baixe agora!!).

Neste artigo vou falar sobre a famosa técnica de consulta de mídia chamada Media Queries que atribui diferentes estilos CSS para diferentes resoluções de tela possibilitando assim fornecer um visual diferente a cada resolução detectada.

Então? Pronto para começar? Let’s Go!

Neste artigo você verá:

Primeiro passo – Media Types

A questão de pensar em design responsivo não é tão somente se preocupar com resoluções de tela. Antes mesmo de surgir as medias queries houve um esforço para que pudéssemos disponibilizar estilos com responsividade para atender dispositivos como a impressora, por exemplo.

E para entendermos melhor, o que digo, imagine-se no lugar de uma dona de casa que se interessa por uma bela receita de bolo que vi na internet e que deseja imprimir a receita para utilizá-la depois.

O que você acha de fornecermos a ela um estilo CSS que oculta, banners, logos e todo aspecto visual desnecessário para que ele possa visualizar e imprimir um texto clean? Isso tudo é possível! Com Media Types do CSS.

Media Types vem do inglês  e significa “tipos de mídias”.  Sua especificação define CSS para alguns tipos de dispositivos como braille, apresentações do Powerpoint, impressoras, entre outros.

Conheça agora os tipos de acordo com a norma da W3C para Media Types:

  • all: Para todos os dispositivos.
  • braille: Para dispositivos táteis.
  • embossed: Para dispositivos que imprimem em braille.
  • handheld: Para dispositivos de mão, com telas pequenas e banda limitada.
  • print: Para impressoras.
  • projection: Para apresentações projetadas. Por exemplo projetores.
  • screen: Para monitores ou outros dispositivos com telas coloridas.
  • tty: Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
  • tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
  • speech: Para sintetizadores de voz.

Voltando ao caso da dona de casa e sua receita… Como  poderíamos ajudar nessa questão? Como seria a aplicação na prática? E a resposta é simples, Galucho. Você pode simplesmente criar uma folha especifica para a impressão e no atributo “media” dentro da tag HTML link colocar o valor “print”.

<link rel="stylesheet" href="print.css" type="text/css" media="print">

Ou dentro de um arquivo CSS:

 @media print {
    /* Aqui vai as declarações desejadas */
  }

Apesar dos tipos de medias citados, a tecnologia empregada em dispositivos com acesso a internet evolui muito rápido e dezenas de novos tipos de celulares, tablets e Tvs cada vez mais parrudos e diferenciados surgem a todo momento.

Muitos destes dispositivos são pequenos no tamanho mais possuem resoluções iguais, quiçá melhores, a de um PC. Parece confuso pois não podemos usar uma media type para dispositivo de mão já que não se enquadra no tipo, muito menos screen já que é para desktops. E agora quem poderá nos ajudar?

Evolução – Media Queries

Media Querie significa “consulta de mídia” e se utiliza de uma expressão lógica para verificar os tipos de dispositivos cobertos pelas media types e também a capacidade deles. A expressão lógica efetua consultas ao dispositivo que o usuário está usando para acessar o site e checar característica como resolução de tela, altura e largura de browser, entre outras coisas. A partir daí é possível especificar o estilo desejado conforme a características do dispositivo consultado. Mas como proceder?

Existe uma lista de características de mídia (Media Features) que você pode utilizar para selecionar os dispositivos que você quiser. Veja:

  • aspect-ratio;
  • color;
  • color-index;
  • device-aspect-ratio;
  • device-height;
  • device-width;
  • grid;
  • height;
  • monochrome;
  • orientation;
  • resolution;
  • scan;
  • width;

Para efetuar uma consulta de mídia é necessário usar um ou um conjunto destas características para que, de forma lógica, se especifique os estilos desejados. Imagine o seguinte cenário:

Queremos que a cor de fundo de um site tenha a seja vermelho quando acessado por um dispositivo com largura de até 480 pixels, e  que tenha a cor de fundo branco em dispositivos com largura acima de 480 pixels. Veja como ficaria código:

/* Estilos aplicados a larguras acima de 480 pixels */

body {
       background-color: #fff;
}

/* Estilos aplicados a larguras até 480 pixels */

@media screen and (max-width: 480px) {
      body {
             background-color: #ff0;
       }
}

Com o tempo você pode perceber que algumas características são mais utilizados que outros. Comece observar os códigos fontes de sites e verá que muitos estilos usam o “width”, como fiz no exemplo anterior, aplicando o prefixo min/max (min-width para largura mínima e max-width para máxima largura).

Esta característica tem como valores medidas de comprimento e durante a consulta eae verifica a largura da janela do browser (largura do viewport) que é um dado comum e de fácil utilização.

Na hora que for desenvolver basta ter o valor da largura de um dispositivo em mente e executar a consulta com medias queries, especificando as declarações CSS para o dispositivo nesta largura.

Mas quais são as larguras mais comuns para que você possa estabelecer o ponto exato da consulta?

Para isso vou mostrar as resoluções de alguns dispositivos do mercado e o conceito de breakpoints.

Breakpoints

Breakpoints são “pontos de quebras” onde determina-se as larguras que o desenvolvedor deseja efetuar em uma consulta através de medias queries. Para isso basta que ele conheça a resolução de um dispositivo, que é a largura e altura em pixels, e a partir do valor da largura ele especifique como valor do breakpoint.

Existem alguns valores bastante utilizados por desenvolvedores, mas não é uma regra absoluta já que existem milhares de dispositivos e estes valores, claro, não cobrem todos. Veja um exemplo utilizado no framework Bootstrap:

/* Telefones em paisagem e abaixo */
@media (max-width: 480px) { 
     /* estilos aqui */
 }

/* Telefones em paisagem a tablet em retrato */
@media (max-width: 767px) {
     /* estilos aqui */
}

/* Tablet em retrato a paisagem e desktop */
@media (min-width: 768px) and (max-width: 979px) {
     /* estilos aqui */
}

/* Desktop grande */
@media (min-width: 1200px) {
    /* estilos aqui */
}

Clique aqui para aprender mais sobre o framework Bootstrap.

Content-driven breakpoints

Em um excelente artigo escrito por Sérgio Lopes  onde ele prega que qualquer lista de media queries padrão é muito pobre quando pensamos na situação atual ,e futura, dos diferentes dispositivos, pois não garante que seu design funcionará em todos os dispositivos.

Ele sugere que utilizemos o “content-driven breakpoints”, que seria encontrar as medias queries a partir do conteúdo e design do site. No processo ele utiliza unidades flexíveis “em” e porcentagem redimensionando o navegador até que se perceba que algo no layout não está legal. A partir disso ele cria uma nova media query com o valor no CSS e executa as devidas alterações. Com isso os breakpoints será baseados no conteúdo e no design de um site e não em valores padrões que não atendam a todos dispositivos.

Esta é melhor forma de pensar e agir para que um site atenda a diferentes resoluções de tela. No eBook sobre Design Responsivo eu sigo essa linha  de pensamento. Nele eu falo que devemos utilizar em projetos responsivos a máxima do  “conteúdo first”.

Testando

Depois que você desenvolveu o design responsivo, você vai precisar saber se realmente está tudo funcionando para uma boa gama de dispositivos existentes, certo?

Existem algumas ferramentas emuladoras online que simulam a aparência do seu site em diferentes dispositivos e resoluções. Uma delas é a Codeorama:

Codeorama

Basta digitar o seu site e  selecionar as resoluções.  Veja algumas consultas no Codeorama aplicada ao Chief of Design.

Resolução 320 x 480:

codeorama-320x480

Resolução 600 x 1024:

codeorama-600x1024

Outra opção é o Screenfly que possibilita testar simulando diferentes dispositivos.

screenfly

Você também pode utilizar extensões no seu navegador como o Window Resizer, por exemplo.
E por fim, utilizar a ferramenta de desenvolvimento do seu navegador. O Google Chorme e o Mozila Firefox tem ferramentas avançadas para verificação de resoluções.

Conclusão

Com este artigo você já tem uma boa base introdutória para mexer com CSS3 medias queries. Atualmente a grande maioria dos navegadores dão suporte, portanto você já pode começar agora. Tudo o que você precisa é ter um bom conhecimento de CSS (caso não tenha você pode adquirir o nosso eBook Fluência em HTML & CSS, clicando aqui!)  e ter em mente todos os conceitos do design responsivo.

Não há mais espaço para sites fixos que não funcionam bem em celulares. Pensar em Design Responsivo é pensar na experiência do usuário. E a utilização das medias queries é aliada de quem pretender fornecer a melhor experiência ao usuário.

Muito bem Galucho! E você se preocupa em construir sites responsivos?

Então não deixe de acessar também o nosso guia completo sobre design responsivo. Acesse agora o site https://www.designresponsivo.com.br/

E você galucho? Já desenvolve com medias queries? Nos diga suas experiências.

Forte abraço

Até mais

Referências

http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/
http://sergiolopes.org/media-queries-conteudo/
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
http://tableless.com.br/introducao-sobre-media-queries/
https://www.w3.org/TR/CSS21/media.html

David Arty

Olá. Sou David Arty, fundador do blog Chief of Design.
Sou natural de São Paulo, Brasil. Trabalho com design, principalmente com design para web, desde 2009. Procuro transformar ideias loucas e complexas em peças simples, atrativas e funcionais.


Also published on Medium.