Flexibilidade em páginas para dispositivos móveis com media queries

Já fez seu site mobile? Explore o mercado que mais cresce no Brasil e no mundo com as melhores práticas de Web mobile.

No artigo sobre viewport, aqui do Blog, vimos como criar uma página com tamanho adequado aos diversos dispositivos que temos que lidar hoje em dia.

Se colocarmos um viewport com width=320, por exemplo, conseguimos criar uma página para iPhone e outros smartphones normalmente. Mas e se a página for aberta num iPad de 768px de resolução? Ou em um tablet Android de 600px de largura? Ou um smartphone Android de 533px em modo paisagem?

Criar sites específicos para cada tamanho de tela não é a melhor solução.

(Atualização: escrevi mais detalhadamente sobre media queries no meu novo livro A Web Mobile, lançado pela editora Casa do Código. O livro trata de muitos assuntos de design responsivo e mobile, incluindo vários cenários de media queries.)

Podemos então colocar o viewport com width=device-width e codificar nosso HTML e CSS para usarem 100% da largura, flexibilizando nosso layout. Mas será que nosso layout vai ficar bonito tanto em um smartphone de 240px quanto num tablet com 1024px?

No último site mobile que fizemos, o do livro Arquitetura Java, usar um layout flexível deixava a página muito usável em telas pequenas (como num Nokia de 240px) mas não em telas maiores (como em um iPad):

Só fazer layouts flexíveis também não é a melhor solução. Precisamos ajustar o design de acordo com o dispositivo usado.

Media types

Desde muito tempo o CSS tem suporte para se definir regras que só valem em certo contexto. Os media types permitem que se use estilos diferentes em situações diferentes e sempre foram muito usados para distinguir a renderização na tela da impressão:

   <link rel="stylesheet" href="estilos.css" media="screen">
   <link rel="stylesheet" href="impressao.css" media="print">

Todos os navegadores modernos suportam esse media type print que é aplicado apenas quando vamos imprimir uma página (útil para esconder o menu de navegação ou aumentar a fonte do texto, por exemplo).

Alguns celulares antigos suportavam também o tipo handheld para estilos específicos para sites mobile. Os smartphones modernos como iPhone e Android, porém, ignoram o media type handheld pois são capazes de renderizar sites completos e não apenas as versões simples feitas para os celulares antigos.

Como então escrever CSS específico para mobile pensando em smartphones e tablets que não se encaixam no media querie handheld? Novos media queries!

CSS3 media queries

Melhor do que separar os dispositivos em desktop (screen) e mobile (handheld), os novos media queries permitem que foquemos principalmente no tamanho da tela onde vamos exibir o conteúdo.

É possível criar um CSS que só se aplique a tamanhos de tela de, no máximo, 320px por exemplo (como um iPhone em modo retrato):

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

Existem diversas opções de media queries com bastante suporte. Além da max-width, podemos usar min-width, width e device-width – e todas as variações delas com height.

A diferença entre width e device-width é se estamos pensando em CSS pixels ou no tamanho do viewport. Geralmente não é boa prática depender do tamanho físico do aparelho então não usamos tanto device-width.

Uma decisão que precisa ser tomada é de se usar max-width ou min-width. O max é bom para quando temos um layout Desktop pronto e queremos adaptá-lo para dispositivos menores – vamos então definindo novas regras que se aplicam só aos dispositivos de no máximo certo tamanho. Já o min pode ser útil quando criamos um site só mobile ou começamos pelo mobile – nesse caso, é mais fácil ter um layout base e ir customizando para dispositivos maiores, com no mínimo certo tamanho.

Mais media queries

Além dos media queries de tamanho, aparelhos mais modernos suportam também um media querie que pega a orientação do dispositivo:

<link rel="stylesheet" href="phones.css"
      media="screen and (min-width: 320px) and (orientation: portrait)">

Isso pode ser útil para customizar a experiência do site de acordo com como o usuário está segurando o aparelho. É sabido, por exemplo, que um celular em modo retrato é mais usável com navegação na parte de baixo à esquerda; e, no modo paisagem, com navegação no topo e nas laterais.

Áreas quentes para toque num smartphone comum em retrato e paisagem

Além de declarar as media queries na tag <link> no HTML, podemos também fazer direto dentro do arquivo CSS (podemos juntar tudo num arquivo CSS só e economizar requests):

/* regra aplicada em todo lugar */
body { background: blue; }

/* aplica somente a partir de 320px */
@media screen and (min-width: 320px) {
   body { font-size: 80%; }
}

/* aplica somente a partir de 480px em landscape */
@media screen and (min-width: 480px) and (orientation: landscape) {
   nav { float: left; }
}

Há ainda como mirar dispositivos de alta resolução (como iPhones e iPads com Retina Display) com device-pixel-ratio para provermos imagens de melhor qualidade quando elas forem úteis. Ou ainda a opção (color) que permite distinguir entre dispositivos coloridos ou não (como um ereader ou Kindle).

Temos muitas outras opções de media queries na especificação do W3C e várias delas já disponíveis nos aparelhos de hoje.

Media queries comuns

E quais valores usar no projeto para adaptar para diferentes larguras? O ideal seria fazer as adaptações conforme seu layout exige (seria até possível fazer um layout só com porcentagens e sem media querie nenhum que funcione em diversos tamanhos de tela).

Mas se você pensa nos dispositivos mais comuns de hoje, existem algumas combinações de media queries famosas. O projeto 320andup por exemplo sugere que você faça um layout base pensando em 320px e depois adapte para outros tamanhos com:

@media print { }

@media only screen and (min-width: 480px) { }
@media only screen and (min-width: 600px) { }
@media only screen and (min-width: 992px) { }
@media only screen and (min-width: 1382px) { }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) { }

Há a regra para impressão e outras 4 pensando em tamanhos comuns de smartphones e tablets. A última regra foca em dispositivos com alta resolução como os Retina Display e Android modernos. (o uso da keyword only serve apenas para esconder essas regras de navegadores antigos que não suportem media queries mas suportam o media type screen)

No nosso site arquiteturajava.com.br que suporta mobile, usamos o layout base pensando em 240px e os seguintes media queries:

@media screen and (min-width:320px) { }
@media screen and (min-width:480px) { }
@media screen and (min-width:600px) { }
@media screen and (min-width:768px) { }
@media screen and (min-width:992px) { }

Nós inclusive abrimos o código do site no Github para servir de exemplo de design mobile com media queries e viewport.

Site do livro aberto em tudo quanto é dispositivo: tablet, ipad, smartphone, tv, desktop, ereader

Conclusão

As novas media queries do CSS3 são muito úteis para adaptar nosso site a diferentes resoluções. E o melhor é que contam com excelente suporte nos navegadores mobile.

O título desse post não está muito correto. Apesar das media queries serem fundamentais para a Web mobile (e terem nascido nesse meio), todo os navegadores Desktop modernos também suportam os media queries de CSS3 (até o IE). Usar max-width, por exemplo, vai fazer com que o layout se ajuste ao tamanho da janela do navegador.

Para aprender mais sobre flexibilização de layout, media queries e Web Design Responsivo em geral, recomendo os Web Design Responsivo e A Web Mobile, lançados pela Editora Casa do Código. O curso de front-end da Caelum também fala de media queries e responsivo como um dos tópicos.

40 Comentários

  1. Renato 03/04/2012 at 19:31 #

    Bacana, ainda nao conheci tudo isso!!! Favoritado… abrax!

  2. Flavio Sakamura 05/04/2012 at 12:29 #

    Excelente post! Quero deixar meu site assim, como esse do arqutietura. o wordpress poderia ter template pra isso.

  3. Caio Ribeiro Pereira 06/04/2012 at 21:51 #

    Excelente dica!! Já tinha ouvido falar sobre media queries, mas não sabia de como restringir certo detalhes para cada resolução tudo em um único css, separado apenas por seletores.

    Parabéns pelo post, e irei com tempo melhorar meus sites utilizando essa técnica.

  4. Caio Ribeiro Pereira 06/04/2012 at 21:52 #

    Alguém sabe algum projeto web que consegue simular a visualização de um site em diversas resoluções, principalmente que de destaque para testar resoluções mobile?

  5. Sérgio Lopes 07/04/2012 at 11:22 #

    Oi Caio!

    Um famoso é esse aqui da StudioPress: http://www.studiopress.com/responsive/
    Mas tem vários por aí. Eu tenho um projetinho no Github que faz um vídeo do seu site em todas as resoluções: https://github.com/sergiolopes/responsive-play

    Abraços

  6. Caio Ribeiro Pereira 07/04/2012 at 12:57 #

    Vlw Sérgio!!

    Ambos os projetos são excelentes!

  7. Caio Ribeiro Pereira 10/04/2012 at 17:26 #

    Apenas corrigindo no texto de conclusão, descobri que as versões IE6 e IE7 não funcionam corretamente CSS Media Queries, porém achei um script que visa compatibilizar isso:

    http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

  8. Sérgio Lopes 10/04/2012 at 17:34 #

    Oi Caio! No IE8 também não, só a partir do IE9. Na conclusão, eu inclui o IE pensando na última versão, não nas velhas (senão, pensando assim, nos Firefox e Chrome velhos também não funcionava).

    http://caniuse.com/css-mediaqueries

    Mas como o objetivo das media queries é atender melhor a resoluções menores (como mobile), acho que você pode ignorar os IEs Desktop sem problemas. Eu ignoro nos meus projetos; os IEs velhos recebem a versão Desktop fixa, não responsiva, e pronto.

  9. Taia Rock 11/05/2012 at 17:33 #

    Oi Sérgio!!!

    gostei muito do seu projeto https://github.com/sergiolopes/responsive-play

    mas me diz uma coisa, o objetivo é “apenas” mostrar o site de ajustando ou temos acesso ao video gerado para usar em portifólio etc?

    desculpe-me se a pergunta for muito non-sense.

    Abraçp\o

    Taia

  10. Sérgio Lopes 11/05/2012 at 18:03 #

    Oi Taia!

    O vídeo é gerado na sua máquina como um mp4 normal, aí você pode usá-lo nas suas páginas sim!
    Eu, por exemplo, subi pro Youtube um vídeo: https://www.youtube.com/watch?v=N_17S54YNhE

    Abraços!

  11. FaBiO_X 16/05/2012 at 17:16 #

    Muito bom. A implementação trazida pelo HTML5 e o CSS3 foram de grande ajuda.
    também falei um pouco sobre o media queries em um artigo ( http://fabioortiz.wordpress.com/2012/05/16/css3-media-queries/ ) e detalhei um pouco sobre alguns outros atributos.

    Realmente mto bom termos conhecimento dessas implementações

  12. Afrânio 28/05/2012 at 13:54 #

    Muito bom. Acabei de adaptar um projeto pra IPAD e ficou ótimo.

  13. Danilo 06/06/2012 at 13:48 #

    Olá, eu tenho uma dúvida sobre seu artigo.
    por exemplo:
    @media screen and (max-width:460){
    font-size:80%;
    }

    Isso não iria diminuir ainda mais o font-size ? Supondo que em um desktop a font padrão é 16px daí beleza, mas no iphone qual é o padrão ? se for menor que 16 ainda estarei a diminuir a 80% ?

  14. Sérgio Lopes 06/06/2012 at 13:59 #

    Danilo, o padrão é 16px no iPhone também. Mas precisa ver mesmo se essa regra de diminuir a fonte no celular é uma boa ou não. Vai depender de cada página e layout. Mas em geral, as fontes no celular deveriam ficar menores que no computador já que usamos o celular mais próximo dos olhos.

  15. Luciano 11/06/2012 at 14:39 #

    Sérgio só com suas dicas já consigo adaptar meus sites pro meu celular ou precisaria de mais coisas?

  16. Sérgio Lopes 11/06/2012 at 17:28 #

    Consegue sim! Tecnicamente, só media queries e viewport são suficientes. O resto é adaptar o design e UX.

  17. reynaldo 31/07/2012 at 09:45 #

    Sérgio, parabéns pelo texto

    Estou aprendendo a usar isto para adaptar um sistema para rodar SOMENTE em Tablets com 1024×600 (minimo), portrait ou landscape. Estou com muita dificuldade, comum em todo aprendizado.

    Fiz o sistema e está rodando em 1024×800 (tablet sansung),as Divs tem tamanho fixo, tables e imagens tambem. E agora amigo? Qual o melhor caminho para o ajuste?

    Grato por qualquer ajuda, se puder indicar um livro ou link para aprender mais obrigado

    reynaldo

  18. Sérgio Lopes 31/07/2012 at 15:07 #

    Oi Reinaldo!

    Se voce precisa que o site se ajuste a diferentes dispositivos, com diferentes resolucoes (como um Samsung e um iPad por exemplo), o melhor é não fazer divs com tamanho fixo. Use porcentagens e faça um design fluído. Coloque media queries apenas se precisar mudar algo entre uma resolucao e outra.

    Um livro que recomendo é o “Responsive Web Design” do Ettan Marcotte:
    http://sergiolopes.org/review-responsive-design-ethan-marcotte/

    Abraços

  19. Bruno Sousa 28/09/2012 at 20:09 #

    Olá Sérgio, tudo bem?
    Olha, segui todas as suas dicas, só que estou com um problema. Quando testo no computador, redimensionando o browser, ou mesmo usando sites que simulam a resoluçao dos dispositivos mobiles (como o screenqueri.es , por exemplo), tudo funciona perfeito! As divs estao todas com %, tudo resimensiona bonitinho….

    Todavia, quando testo em um celular (iphone), o layout não muda, ele fica com o mesmo layout do tamanho maior!… o que pode estar acontecendo?

    Desde já agradeço.

    Abraços.

  20. Sérgio Lopes 28/09/2012 at 20:15 #

    Oi Bruno!

    Provavelmente faltou configurar o viewport:
    http://blog.caelum.com.br/pixels-pixels-ou-pixels-dicas-de-web-mobile-com-viewport/

    Abraços!

  21. Rafael 02/10/2012 at 11:57 #

    Muito bom!

  22. Rafael Gustavo 18/10/2012 at 17:17 #

    Primeiramente parabéns Sergio pelo post, minha dificuldade esta na questão dos dpi’s, como resolver o problema no caso de bordas com 1px nos celulares e tablets elas ficam meio apagadas nos botões e detalhes do site. Existe uma listinha de dpi’s dos dispositivos para que isso seja corrigido? Acredito que não seja só eu com esse problema. Obrigado.

  23. Sérgio Lopes 19/10/2012 at 11:19 #

    @Rafael

    Pra mim, mais importante que o dpi do aparelho, é saber o devicePixelRatio dele. Ou seja, como é feito o scale de um pixel CSS pra um pixel na tela. Quanto ao dpi em si, é só uma medida com relação ao tamanho físico da tela, não muito útil pro nosso CSS.

    Por exemplo, aparelhos high end como iPhone retina, iPad retina e Galaxy S3 têm um pixel ratio de 2. Isso quer dizer que 1px no CSS vira 2px na tela do usuário. Nesse cenário, provavelmente a sua linha de 1px ficaria muito boa.

    No mundo Apple, os únicos ratios que existem são 1 pra aparelhos antigos e 2 pra telas retina. No mundo Android, existem 0.75, 1, 1.33, 1.5 e 2. O 0.75 é usado em aparelhos bem low-end, tipo o Galaxy 5. Já o 1.5 é muito comum em smartphones como Galaxy Note, Galaxy SII, Motorola Atrix etc. E o 1.33 é, até onde sei, coisa só do Nexus 7. Nesses aparelhos onde o ratio não é inteiro, 1px no CSS pode ficar mesmo fino demais na tela.

  24. Rafael Gustavo 19/10/2012 at 15:43 #

    Muito obrigado Sergio pela atenção, andei pesquisando muito e realmente onde o pixel não é inteiro fica falhado.

    Concerteza esse é um blog que eu recomendo! Abração.

  25. Kleber 26/10/2012 at 10:35 #

    Bom dia, estou com uma dúvida do seguinte código.
    @media screen and (min-width:320px) { }
    @media screen and (min-width:480px) { }
    @media screen and (min-width:600px) { }
    @media screen and (min-width:768px) { }
    @media screen and (min-width:992px) { }

    Tenho que pegar meu código css e jogar dentro do colchete e ir alterando conforme o aparelho Tablet ou celular?

    no caso terei que edita todo css para que fique 100% no celular ou no Tablet, E gostaria de saber se não existe um jeito de simplesmente copia o css e fazer o Tablet e no formato dele sem precisa de configuração.

  26. Sérgio Lopes 26/10/2012 at 18:22 #

    Oi Kleber,

    Você vai colocar o código CSS dentro dessas chaves sim. Você coloca as regras específicas de cada resolução dentro de cada media querie. Mas você não precisa reescrever todo o CSS pra cada tela. O que o pessoal faz é escrever um CSS base comum pra todos os dispositivos e só usar media queries pra ajustar alguns pontos do design.

    Abraços.

  27. Heloisa 30/10/2012 at 15:00 #

    Muito bom post, me ajudou bastante, obrigado.

  28. Marcio Alexandre Marcondes 07/11/2012 at 10:32 #

    Ótimo post!

    Estava procurando sobre o assunto a muito tempo, mas não havia encontrado. Esse post não só esclareceu minhas duvidas, como tmb me ensinou a fazer sites para Mobile! Obrigado!!!!

  29. joao mello 22/11/2012 at 10:56 #

    se eu trabalhar o site todo em porcentagem, ha algum problema??

  30. Rodrigo 03/05/2013 at 23:37 #

    Ótimo post, obrigado pela orientação ajudou bastante.

  31. Jeferson L. Naztick 30/10/2013 at 09:32 #

    Bom dia!
    Estou com duvida na hora de montar o site para diversas telas como eu começo a fazer isso a partir do site totalmente pronto, Não entendi essa parte abaixo:

    Media queries comuns

    E quais valores usar no projeto para adaptar para diferentes larguras? O ideal seria fazer as adaptações conforme seu layout exige (seria até possível fazer um layout só com porcentagens e sem media querie nenhum que funcione em diversos tamanhos de tela).

    Mas se você pensa nos dispositivos mais comuns de hoje, existem algumas combinações de media queries famosas. O projeto 320andup por exemplo sugere que você faça um layout base pensando em 320px e depois adapte para outros tamanhos com:

  32. Celso 08/11/2013 at 13:11 #

    Excelentes explicações Sérgio. Parabéns pelos seus conhecimentos e pela forma como compartilha eles e ajuda os outros. Está me ajudando muito.

  33. Calebe 20/01/2014 at 10:35 #

    Muito obrigado pela informação, quase que usei javascript para fazer um trabalho tão simples. Hehehehe…

  34. Djalma Bento 24/01/2014 at 11:54 #

    Meus parabéns Sérgio, eu precisa dessas dicas para melhorar meus projetos e aceito a dica dos livros Web Design Responsivo e A Web Mobile e vou reservar os meus, mais uma vez muito obrigado por esse post excelente.

  35. Thiago Correa 04/02/2014 at 15:00 #

    Consigo utilizar isso para Smart Tvs?

  36. Humberto 05/02/2014 at 16:22 #

    Gostei do seu questionamento, assisti o video Alta Resolução, gostei das explicações, teria várias considerações a fazer mas por email daria muito trabalho. Conhece Adobe Reflow? Vale a pena ver. Abç Humberto.
    Pretendo assistir outros videos.

  37. Walter 28/02/2014 at 23:43 #

    O “top” das minhas páginas têm o seguinte código:

    Para portateis eu queria mudar o tamanho da gif para deixar a página mais leve.
    Já tentei media queries dentro do html mas não funciona.
    Nobe bem: A imagem não é background.
    Será que tem jeito?

Deixe uma resposta