19 jul

Design Responsivo com CSS3 Media Queries

Categoria: - Comentários (20)

Dando continuidade aos artigos sobre “Design Responsivo”, hoje nós vamos começar a aprofundar ainda mais os nossos conhecimentos sobre esta técnica.

Anteriormente eu fiz uma pequena introdução ao assunto. Se você não leu, pode ler agora em http://wpmidia.com.br/desenvolvimento-web/iniciando-web-design-responsivo/. Neste post, eu falei sobre o que é Design Responsivo e passei alguns links de recursos interessantes para serem usados nesta técnica.

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.

CSS3 Media Queries (demo)

Abra a demonstração e redimensione o seu navegador para ver as Media Queries em ação.

Max Width

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

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

Min Width

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

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.

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.

Para o iPhone 4

O seguinte stylesheet é especificamente para iPhone 4.

Para iPad

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

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.

Exemplos de sites responsivos

Hicksdesign

1. Três colunas e barra lateral
2. Duas colunas e barra lateral (a coluna do meio cai para a coluna da esquerda)
3. Uma coluna lateral (a coluna da direita desloca-se para baixo do logotipo)
4. Sem barra lateral (o logo e a coluna da direita deslocam-se para cima e as colunas da barra lateral e outras, movem-se para abaixo)

Hicksdesign - http://hicksdesign.co.uk/

Hicksdesign – http://hicksdesign.co.uk/ (clique na imagem para ampliar)

Colly

O layout deste site muda de uma coluna, duas colunas e quatro colunas, dependendo do tamanho da área de visão do seu navegador.

Colly.com

Colly – http://colly.com/ (clique na imagem para ampliar)

A List Apart

1. Navegação no topo, 1 fileira de imagens
2. Navegação no lado esquerdo, 3 colunas de imagens
3. Navegação no topo, nenhuma imagem de fundo no logotipo, 3 colunas de fotos

A List Apart

A List Apart – http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (clique na imagem para ampliar)

Tee Gallery

Este site é similar ao exemplo do site Colly, mas a diferença está nas imagens. No Tee Gallery, as imagens são redimensionadas junto com o layout. O truque é usar porcentagem ao invés de pixel fixo (width=100%).

Tee Gallery

Tee Gallery – http://teegallery.com/ (clique na imagem para ampliar)

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.

Há muito que se falar a respeito do Design Responsivo, por isso, em breve eu estarei publicando mais conteúdo sobre esta técnica muito útil nos dias de hoje.

Se gostaram do artigo, curtam e compartilhem!!! E, como sempre, qualquer dúvida, basta enviar um comentário. :-)

Este artigo é uma adaptação/tradução do artigo original em http://webdesignerwall.com/tutorials/css3-media-queries 

Comentários ( 20 )

  • Leonardo

    Boa tarde amigo, tenho uma dúvida

    Existe alguma diferença entre:
    @media (min-width: 768px) {}
    e
    @media screen and (min-width: 768px) {}

    Se existe, qual seria? (Além do modo de escrever)

    • wpmidia

      Olá Leonardo!

      O primeiro código vai funcionar para qualquer midia (incluindo “print”) e o segundo somente para desktop e mobile…

  • Alexandre

    Obrigado pelo retorno.

    não me refiro a monitor e sim a smartphones e tablets.
    imagine em um outro exemplo que eu declaro um valor máximo de 480px e o camarada acessa com um smartphone de 640px(exemplo) o que vai acontecer?

    • wpmidia

      Você precisa ter um código que se ajuste aos principais breakpoints.
      Se deixar o tamanho menor, quando ele for acessado num dispositivo maior (entenda o que eu quis dizer no meu comentário antigo como “monitor”), vai haver uma sobra nas laterais, apenas isso.

      Grande abraço.
      Miriam de Paula

      • Alexandre

        veja bem, o iphone 5 tem 4 polegadas e tem uma resolução de: 640 x 1136 pixel

        vc não vai ter a mesma experiência de um desktop em um smartphone desse.

        minha dúvida é saber se quando eu acessar um site que esteja com: max-width: 480px o que vai acontecer? sobrar espaço? e a metatag viewport não auxilia em nada?

        no exemplo do iphone acima veja que ele possui uma resolução de monitor de pc: 1136px como resolver isto?

        • Alexandre

          detalhe: as vezes é comum se ajustar um site em: 980px para desktop e notebooks. imagine acessando com um iphone de 1136px agora.

        • wpmidia

          Alexandre, o ideal seria que você tivesse um CSS específico para os principais breakpoints, conforme eu já te falei aqui…

          Faça um CSS para max-width: 360, 480, 768, 1200… etc.

          Não precisa de um arquivo CSS pra cada um, apenas use as Media Queries no seu arquivo CSS e vá ajustando apenas o que deve ajustar.

          Abraços.
          Míriam de Paula

          • Alexandre

            entendi. só uma última questão: um iphone 5 com 1136px de resolução pega as configurações de um site para monitores de pc a partir de 980px? ou não? como se comporta um iphone neste caso?

          • wpmidia

            Dá uma olhada nisso http://stephen.io/mediaqueries/

  • Alexandre

    Olá. gostaria de tirar uma dúvida.

    se meu site é otimizado para ser visualizado em 768px(exemplo) e o camarada acessa por um celular de 1024px, ou seja, maior. o que vai acontecer? neste exemplo, pense que fiz assim: max-width: 768px

    • wpmidia

      Olá Alexandre.

      Se você configurou um tamanho limite de 768px, se alguém abrir num monitor maior, vai ver espaços vagos nas laterais…

      Abs.
      Miriam

Envie seu comentário

Resize-me!