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

Postado em 03. abr, 2012 por Sérgio Lopes em Mobile, Web Design

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.

Sérgio Lopes ()

Mais sobre o autor

Tags: , , , , , , ,

32 Respostas para “Flexibilidade em páginas para dispositivos móveis com media queries”

  1. Renato

    03. abr, 2012

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

  2. Flavio Sakamura

    05. abr, 2012

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

  3. Caio Ribeiro Pereira

    06. abr, 2012

    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. abr, 2012

    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. abr, 2012

    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. abr, 2012

    Vlw Sérgio!!

    Ambos os projetos são excelentes!

  7. Caio Ribeiro Pereira

    10. abr, 2012

    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. abr, 2012

    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. mai, 2012

    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. mai, 2012

    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. mai, 2012

    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. mai, 2012

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

  13. Danilo

    06. jun, 2012

    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. jun, 2012

    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. jun, 2012

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

  16. Sérgio Lopes

    11. jun, 2012

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

  17. reynaldo

    31. jul, 2012

    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. jul, 2012

    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. set, 2012

    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. set, 2012

    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. out, 2012

    Muito bom!

  22. Rafael Gustavo

    18. out, 2012

    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. out, 2012

    @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. out, 2012

    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. out, 2012

    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. out, 2012

    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. out, 2012

    Muito bom post, me ajudou bastante, obrigado.

  28. Marcio Alexandre Marcondes

    07. nov, 2012

    Ó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. nov, 2012

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

  30. Rodrigo

    03. mai, 2013

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

Trackbacks/Pingbacks

  1. Apostilas da Caelum agora em HTML: bastidores | blog.caelum.com.br - outubro 8, 2012

    [...] apostilas são construídas com web design responsivo, usando media queries e conteúdo [...]
  2. Media Query – Fazendo layout responsivo | allan dennis - março 2, 2013

    [...] http://blog.caelum.com.br/flexibilidade-em-paginas-para-dispositivos-moveis-com-media-queries/ [...]

Deixar uma Resposta