Dani Guerrato

Design Responsivo III – Media Queries e Compatibilidade

Por | Comentários: 90

Ok. Então você decidiu fazer o seu layout responsivo…  Você não esta sozinho na sua aventura. Este post contém muitas informações e ferramentas úteis para criar imagens fluidas, fazer consultas de mídia, vencer os browsers antigos e testar o resultado final para você desenvolver um layout like a boss.

Nos capítulos anteriores nós discutimos as vantagens de se trabalhar com design responsivo e como criar um grid flexível. Agora está na hora de colocar a mão na massa e construir um layout! Por onde começar? Eu diria que por um bom wireframe! Imprimir estes templates e desenhar a mão o esqueleto do seu site em diversas resoluções é uma boa dica para organizar todas as informações. Ok, você já tem um design bacana. É hora de desenvolver!

Imagens Fluidas

O primeiro passo é garantir que as imagens vão se adaptar de acordo com o layout. A solução mais prática é forçar as imagens a se redimensionarem proporcionalmente de acordo com o tamanho de um container. Para fazer isto basta uma linha de código:

Esta técnica também funciona para outros objetos como vídeos:

Se você (ainda) dá suporte ao Internet Explorer 6 você deve colocar o seguinte parâmetro em uma folha de estilos especifica para ele:

Parece a mesma coisa, mas não é. A diferença é que no max-width:100% as imagens nunca ultrapassarão o tamanho do container. Já no segundo caso as imagens SEMPRE estarão EXATAMENTE do tamanho do container. Se você for usar esta regra para o IE certifique-se de que suas imagens são do tamanho certo para não “estourar” os pixels, ok?

Outra coisa importante de se ter em mente é que o Windows não renderiza muito bem imagens redimensionadas em browsers antigos (como IE7 ou anterior). O artigo Fluid Images do Unstoppable Robot Ninja ensina a usar o filtro AlphaImageLoader para corrigir o problema. Realmente ninja!

Outra técnica bacana é cortar as laterais da imagem, escondendo ou revelando algumas partes de acordo com o tamanho do browser. Uma maneira simples de fazer isto seria determinar um overflow:hidden para o container da imagem.

Só lembrando que esta técnica vai cropar (existe este verbo? :)) a imagem indiscriminadamente. Se você quiser ter um controle maior sobre que parte da imagem é cortada o artigo Hiding and Revealing Portions of Images ensina algumas maneiras de fazer isto.

O que são Media Queries?

A explicação rápida: são expressões de CSS utilizadas para mudar o layout em diferentes aparelhos sem mudar o conteúdo. A explicação longa: No CSS2 existia uma função chamada Media Type. Ela servia, como o nome já diz, para reconhecer um determinado tipo de dispositivo. Ao todo eram 10 diferentes Media Types:

  • all – todos os dispositivos
  • aural – sintetizadores de voz
  • braille – leitores de Braille
  • embossed – impressoras de Braille
  • handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.
  • print – impressoras convencionais
  • projection – apresentações de slides
  • screen – monitores coloridas
  • tty – teleimpressores e terminais
  • tv – televisores

 

Como isto funciona na prática? Vamos supor que você queira determinar estilos específicos para a impressão em papel, por exemplo. Você pode fazer isto basicamente de duas maneiras. Acrescentando um link para uma outra folha de estilos no cabeçalho do seu documento:

Ou utilizando um CSS unificado com a função @media:

E isto serviu bem. Por um tempo… Com a evolução dos dispositivos alguns aparelhos não se encaixavam em nenhuma destas categorias. Um smartphone moderno tem a tela e resolução muito melhores do que os celulares que se encaixam na categoria handheld… E o que dizer dos recém inventados tablet? Para a nossa salvação, no CSS3 a coisa ficou mais complexa com as tais Media Queries, uma espécie de upgrade dos Media Types. Media Querie, do inglês Consulta de Mídia, é uma expressão lógica que não verifica apenas o tipo do dispositivo, mas também a capacidade dele. É como se o Media Querie fizesse uma pergunta para o browser (sendo que a resposta é sempre verdadeira ou falsa). A vantagem disto é um controle muito maior sobre o layout! Você consegue utilizar estas consultas para checar coisas como a altura e a largura do browser, orientação, resolução, etc.

Parâmetros do Media Queries

Os Media features lembram bastante as propriedades de CSS. Cada uma tem um nome e aceita certos valores. Basicamente é a lista de perguntas disponíveis que você pode fazer para o browser. São elas:

Width

Largura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Height

Altura do viewport (janela do browser incluindo a barra de rolagem).
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-width

Largura da mídia. No caso de uma mídia digital é o tamanho da tela. No caso de impressão é o tamanho da folha.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Device-height

Altura da mídia.
Valor: medidas de comprimento.
Aceita prefixo min/max: Sim.

Orientation

Orientação da mídia.
Valor: portrait (retrato) ou landscape (paisagem)
Aceita prefixo min/max: Não.

Aspect-ratio

Proporção. Razão entre os valores do ‘width’ e ‘height’. Apenas aplicável a mídias do tipo bitmap.
Aceita prefixo min/max: Não.

Device-aspect-ratio

Proporção da tela do dispositivo.
Aceita prefixo min/max: Não.
Exemplo de aplicação:

Color

Número de bits por cor. Se o valor for zero o dispositivo é monocromático.
Valor: numérico
Aceita prefixo min/max: Sim.

Color-index

Número de entradas na tabela de pesquisa de cores do dispositivo de saída. Se o dispositivo não utiliza uma tabela de pesquisa de cor, o valor é igual a zero.
Valor: numérico
Aceita prefixo min/max: Sim.

Monochrome

Este recurso de mídia descreve o número de bits por pixel em um buffer de quadros monocromáticos. Se o dispositivo não é um monocromático o valor será 0.
Valor: numérico
Aceita prefixo min/max: Sim.

Resolution

Resolução do dispositivo (densidade por pixel). Apenas aplicável a mídias do tipo bitmap.
Valor: número em DPI ou DCM
Aceita prefixo min/max: Sim.

Scan

Tipo de formação de imagens especifico para televisores.
Valor: progressive (progressivo) ou interlace (entrelaçado)
Aceita prefixo min/max: Não.

Grid

Determina se o dispositivo é baseado em bitmap ou em um grid (exemplo: um terminal tty ou um telefone com apenas uma fonte fixa).
Valor: Se o dispositivo de saída é baseada em Grid o valor será 1. Caso contrário, o valor será 0. Aceita prefixo min/max: Não.
Grid neste contexto é um tipo de dispositivo. Não tem nada a ver com o grid do design, ok? :)

Operadores

Através dos operadores not (não), and (e) e only (apenas) você consegue ter um controle muito mais preciso. Você também pode utilizar o sinal de virgula que equivale a um “ou”. Combine isto com media types e você está pronto para dominar o mundo! :)

Resolução de tela, sua nova melhor amiga!

Se você quiser desenvolver um CSS tendo um dispositivo específico em mente basta você saber a resolução de uma tela (altura e largura em pixels). Já se você quer uma gama maiores de aparelhos  é preciso fazer algumas generalizações para determinar quais vão ser os pontos que o seu layout deverá se transformar. Para isto vamos considerar as seguintes larguras:

  • 320 pixels – Smartphones no modo retrato.
  • 480 pixels – Smartphones no modo paisagem.
  • 600 pixels – Tablets pequenos. Ex: Amazon Kindle (600×800)
  • 768 pixels – Tablets maiores em modo retrato. Ex: iPad (768×1024)
  • 1024 pixels – Tablets maiores em modo paisagem, monitores antigos.
  • 1200 pixels – Monitores wide.

Alguns exemplos

Um iPhone em modo retrato, por exemplo, possui 320px de width. Se você desenvolver um CSS para o smartphone da Apple basta utilizar o seguinte Media Querie:

É como se você perguntasse para o browser: “Hey, o seu dispositivo é uma tela e a largura máxima é 320 pixels?”. Se a resposta for sim o navegador aplica os estilos. Fácil, né? Já se você quiser determinar os estilos de um iPad independente da orientação:

Estas são algumas opções. As possibilidades de combinação são infinitas. Se você quiser mais algumas idéias de uma olhadinha no artigo Hardboiled CSS3 Media Queries do Stuff and Nonsence.

Um exemplo legal de aplicação é utilizar um container e ir variando a max-width de acordo com a resolução da tela. Assim você garante que o seu conteúdo responda a diferentes tipos de dispositivos. Uma ferramenta legal para testar estes pontos de quebra é o Responsivepx. Você consegue visualizar o site e ir diminuindo e aumentando a área de corte até perceber em qual ponto começa algum problema… E aí é só usar um media query para botar a ordem na casa. :)

Para mais informações sobre Media Queries leia a documentação da W3C sobre o assunto.

OK. Mas isso funciona em TODOS os browsers?

Bem, tecnicamente os navegadores que trabalham legal com Media Queries são  Firefox 3.5+, Opera 9.5+, Safari 3+, Google Chrome 4+ e Internet Explorer 9+.  Segundo esta pesquisa cerca de 70% de todos os browsers no mercado aceitam Media Queries. Mas existem algumas maneiras de fazer os outros 30% participarem também da brincadeira…

E6 denial message by RobotJohnny.com creditos: John Martz

Modernizr

O Modernizr é uma biblioteca de JavaScript que detecta quais features de HTML5 e CSS3 um browser suporta. E isso, como vocês podem imaginar, pode ser aplicado aos Media Queries. Através de uma função em JS você pode determinar que uma folha de estilos seja carregada apenas se aquele browser aceitar Media Queries. É importante ler com cuidado toda a documentação da biblioteca para entender tudo que é possível fazer. Se você não precisa de tudo o que o Modernizr oferece, no site da biblioteca você pode baixar uma versão customizada escolhendo apenas as funções que deseja utilizar.

Ficou curioso para saber o que o seu browser atual aceita?  Sem problemas! A suite de testes do Modernizr informa tudo o que o seu navegador pode ou não fazer. Mas se bater uma preguiça de testar a aceitação em browser por browser você pode conferir algumas tabelas em alguns sites como HTML5 Please ou HTML5 & CSS3 Support.

Respond.js

Uma alternativa muito mais simples e leve (apenas 3kb) do que o Modernizzer , o respond.js adiciona suporte a min/max-width para o IE6-8 e outros browsers antigos. Útil se você só precisa destes parâmetros. Para utilizar o respond.js você precisa (além de obviamente instalar o plugin) colocar o comentário condicional /*/mediaquery*/ ao final de todas as media queries que você utilizar no seu CSS. Por exemplo:

css3-mediaqueries-js

Outra solução baseada em javascript. O css3-mediaqueries-js  é mais pesado do que o respond, mas em compensação aceita mais funções e promete fazer IE 5+, Firefox 1+ e o Safari 2 aceitarem todas os features do Media Queries. Você pode conferir mais algumas dicas sobre como degradar suavemente Media Queries neste post da Smashing Magazine.

Tudo é relativo…

Qual destas opções utilizar? Depende de qual você se adapta melhor e do que você precisa para o seu projeto. A verdade é que a escolha da melhor solução sempre depende do caso. Na pior das hipóteses faça uma folha de estilos diferente para o IE e pronto. Para um site que exige manutenção constante ter uma folha de estilos a mais pode ser muito trabalhoso, além de representar uma consulta a mais no servidor e mimimi… Ainda assim, na minha opinião, é uma solução válida. Entre todos os visitantes desta semana do BlogUp, por exemplo, apenas 7% utilizaram o Internet Explorer. Não vou nivelar por baixo e entregar uma experiência pior para os outros 93% por conta de um browser lançado a dez anos atrás… Mas esta é uma posição pessoal minha que vai variar muito de acordo com o público alvo. Se você acha que não vale a pena o trabalho extra simplesmente não use design responsivo. Na verdade, fique longe do HTML5 e do CSS3. Só cuidado para não estar desenvolvendo para o passado. Lembra o que aconteceu com o Flash? :)

Olhe para mim ainda falando enquanto temos ciência pra fazer! Hora de testar.

GoMo

Uma ferramenta bem interessante criada pela Google. Através do GoMo você pode não apenas visualizar screenshots do seu site em um smartphone como também obter um relatório personalizado com dicas para melhorar a Mobile User Experience.

Screenfly

Através do Screenfly você pode ter um preview do seu site em desktops de 10′ a 24′ polegadas, diversos modelos de tablets, smartphones e até televisores… Outra função legal é poder girar a tela para ver seu site em outra orientação… Uma ferramenta muito útil e completa.

Browser Add-Ons

É útil também ter instalado no seu navegador alguma ferramenta como o famoso Web Developer Tools – para Google Chrome ou Firefox – ou um bookmarklet como o este para redimensionar a janela automaticamente em diferentes resoluções.

Vale lembrar que embora ofereçam uma noção muito boa, nenhuma destas ferramentas emuladoras são 100% precisas. Nada substitui o teste no próprio dispositivo! Você pode não ter vários tablets e smartphones, mas vale a pena pedir para os amigos darem uma olhada e conferirem se está tudo certinho…

Isto é tudo pessoal!

Bem, o básico que você precisava saber para lidar com Design Responsivo é isto! Mas fique de olho aqui no blog que vamos sempre postar discas, plugins e best practices sobre este assunto e muitos outros. Espero que vocês tenham curtido. Até a próxima! :)

Tags: > ,

Dani Guerrato

Dani Guerrato

Uma geek que adora Design, Literatura Fantástica, Games de RPG e mochaccinos de chocolate branco - não exatamente nesta ordem. É designer, desenvolvedora front-end, palestrante e co-fundadora da PopUp. Gosta de coisas estranhas como cheiro de livro e bandas de heavy metal que ninguém ouviu falar.

Você pode achar a Dani por aqui:
Facebook - Twitter - - Instagram

  • Frank Gilber

    Parabéns! Dani, mas um execelente artigo sobre Design Responsivo, com exemplos e dicas de fácil compreensão e vale resaltar dicas de ouro. Abs

  • http://twitter.com/yuri_morales Yuri Morales

    Valeu pelo Post Dani, muito legais mesmo as dicas sobre Media Queries 

    :)

    Devidamente favoritado, tanto o blog, como esse post, e compartilhado 

    Forte abraço 

  • http://www.facebook.com/seancamposdesouza Sean Campos de Souza

    belo artigo…parabéns. olha só, você me daria uma “ajuda” pra escrever uma mono sobre isso?  seancampos@gmail.com e a gente conversa

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Sean! Legal sua iniciativa de escrever um trabalho sobre este tema. Talvez eu possa te indicar algum material sobre o assunto… Me manda um e-mail para dani@popupdesign.com.br 
      Abraço!

  • http://www.facebook.com/JonathanFelipe96 Jonathan Felipe

    O Melhor post sobre Design Responsivo que já vi!

    Seu blog está nos meus favoritos :D

  • Bruno Quaresma

    Muuuito bom! Meus parabéns a toda equipe Pop Up.

  • http://www.facebook.com/viviannedacosta Vivianne Costa

    Muito bom post!

  • Alexandre

    Muito bom!

  • Alexandre K. Cordeiro

    Bacana mesmo esse post!

  • Alexandre Kucarcz Cordeiro

    Olá Dani, parabéns pelo artigo!
    Eu estou com uma dúvida. Estou utilizando o tema Skeleton do WordPress que é responsivo. Mas quando eu adiciono uma imagem no corpo de um artigo, a imagem não se ajusta. Coloquei em Configurações avançadas de imagem (nas propriedades de imagem do WP) o tamanho de 100%, mas deu problema no Safari (a imagem fica alargada).Abraço!

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Alexandre!
      Não conheço este tema especificamente para poder te dizer com segurança o que está acontecendo. É necessário dar uma olhada no código… Mas em linhas gerais muita gente confunde width:100% com max-width: 100% (o mais correto no caso do design responsivo). Dê uma olhada se não é o seu caso. Outro problema frequente é que o tamanho das imagens é sempre relativo ao tamanho do container pai. Ou seja, é necessário envolver a imagem em uma div, figure, etc Se elas ficarem “soltas” por aí é provavel que aconteça este bug, pois elas podem estar replicando a largura do seu post, por exemplo. Enfim, espero ter ajudado. Boa sorte! :)

  • http://www.facebook.com/phenri90 Pedro Henrique

    Muito boa a série de artigos sobre Responsive.
    Me ajudou muito a entender como esta técnica funciona.
    Valeu :D

  • Marcoaring

    Mandou super bem…adorei o post.

  • carlos eduardo

    Valeu Dani, parabéns pelos posts sobre design responsivo o blog já está no meu google reader e favoritos. Abs 

  • http://twitter.com/aleredes Alessandro

    Olá galera conheci o site Popup Design através do fórum NFX, lá sou o AGA.

    Gostaria de agradecer pelas postagens. Gostei da forma como vocês blogam e disponibilizam inúmeros links de referência! Muito bom! 

    Abraço,

  • Helder Bargão Robalo

    Bah… Guerrato, fechou com chave d’ouro essa série de design responsivo. Foi buscar só fonte top.

  • Felipelomba

    Muito bom o post, parabéns!!

  • http://www.facebook.com/diogoca Diogo Alves

    Dani, bacana seu post, mas gostaria de saber como eu detecto quando o zoom é realizado via media query?

    • http://www.popupdesign.com.br/ Leandro Lima

      Oi Diogo, tudo bem?
      Via media query eu confesso que nunca vi uma função que detecte o Zoom. Conheço os Viewports, que podem forçar o aparelho móvel a ficar em um determinado Zoom. Pelo o que eu conheço, o zoom destes aparelhos é apenas uma ampliação do que está vendo, e não chega a mudar a resolução da tela.

      Caso eu descubra alguma solução via Media Query, te aviso. A que eu sei é trabalhar com Viewports e limitar o zoom ou tirar esta opção.

      • http://www.facebook.com/diogoca Diogo Alves

        Valeu pela resposta. Vou limitar sempre via viewport, se tiver outra dica me avise.
        Show de bola esses artigos frontend!

  • http://www.facebook.com/GuS2Cris Cristina Costa

    Parabéns novamente
    pelo blog/post Dani. Estou com uma dúvida, se você puder me ajudar lhe
    agradeço. Estou iniciando o desenvolvimento responsivo com base em seu
    post/blog, todavia, ao abrir o endereço http://fabricasites.tempsite.ws/scripts/rwd/new.html no iphone 3Gs de um amigo, o mesmo fica
    perfeito em modo retrato, porém, em modo paisagem, ele abre com barra de
    rolagem, na verdade, com o zoom ativado. Esse problema não ocorre em outros
    celulares de modelos diferentes que fiz o teste, como o Galaxy III e o Windows
    Phone. Ou seja, nesses outros modelos, o código fica perfeito tanto em modo
    retrato como em paisagem. Tem algo que devo incluir no código para evitar a
    abertura no modo paisagem do iPhone 3Gs com zoom? Se puder me ajudar, lhe
    agradeço. Obrigado. (Gustavo)

    • http://www.popupdesign.com.br Dani Guerrato

      Oi Gustavo! Pode ser que seja necessário analisar mais detalhadamente, mas pelo que você está descrevendo parece ser um bug com relação ao zoom do viewport. Se for este o problema tente utilizar a seguinte tag no header:

      Um abraço!

      • http://www.facebook.com/GuS2Cris Cristina Costa

        Obrigado Dani. Eu estou utilizando essa tag Será que tem alguma especifica para iPhone? De qualquer forma obrigado. (Gustavo)

        • http://www.facebook.com/GuS2Cris Cristina Costa

          Quando falo algo específico para o iPhone, cito algo do tipo que é para estilo específico no iPhone4. Obrigado novamente. (Gustavo)

          • http://www.popupdesign.com.br Dani Guerrato

            Não existem tags especificas para iPhone. Esta meta que você mencionou funciona para todos os dispositivos com densidade de pixel maior que 2. O que inclui não apenas o iPhone 4, mas também o iPad 3 ou um Macbook Pro… Você pode customizar a sua Media Query e limitar não apenas pela densidade de pixels mas também pela resolução e assim atingir especificamente o iPhone 4. Mas se o seu problema é o bug do zoom para solucionar você deve ajustar a meta viewport não os media query… Como eu falei, só analisando o código para te dar uma resposta mais correta.

  • http://www.facebook.com/profile.php?id=100001751060531 Isabel Stumpf Mitchell

    Muito bom o seu post Dani Guerrato, está me ajudando bastante. Gostei tanto que o compartilhei em meu blog (www.internetideias.wordpress.com), devidamente referenciado. :)
    Abraços,
    Isabel

  • Rodrigo BK

    Muito boas as matérias! E vc é um gênio! Eu ficaria conversando com vc por horas…

  • http://www.facebook.com/mario.casasanta.5 Mario Casasanta

    dani,, to com alguns clientes com resolução acima de 1400.. como faço pra manter com wide sem desajustar.. pois é bem diferente do nosso padrão de 1280…

  • Léo WG

    Perfeito precisava muito dessas dicas…valew

  • Rodrigo Gonçalves

    Parabéns pelas 3 matérias sobre Design Responsivo, de todas que eu li até o momento o seu foi oque achei melhor. Obrigado por compartilhar. Parabéns pelo trabalho e sucesso sempre.

  • http://www.facebook.com/rodrigoluizgenz Rodrigo Luiz Genz

    muito bom dani, adorei o post, mando super bem

  • http://www.facebook.com/PedroHenriqueAmorim Pedro Henrique

    Sensacional seu post, muito importante mesmo.
    É mais trabalhoso, mas o resultado final é muito melhor.
    Mas requer apenas um planejamento, antes do desenvolvimento.

    Parabéns!

  • Victor Simão

    Nossa, curti muito os posts! =D

  • Carlos

    Artigo interessante

  • Carlosh Rodrigues

    show show show, quero montar um site de teste pra brincar, muito show, parabéns pelo post, muito obrigado

  • http://www.facebook.com/gilberto.moral Gilberto Bá Moral Lopes

    bem legal… já uso em alguns jobs

    Gilberto

    Front-End Webcore Games

    http://www.impactodesigner.com.br/portfolio

  • http://www.facebook.com/edantasn Eduardo Dantas

    Mais um 100%!

  • Giulianna

    Dani, o que eu faco qnd um site nao abre em miniatura no iphone?
    Com o layout fixo ele abre igual a tela do pc: gigante.
    Com o layout fluido ele nao da zoom!!
    http://www.arquitetura8.com.br
    http://www.arquitetura8.com.br/mobile
    Me de uma luz, please!!
    Obrigada

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Giulianna!

      Desculpe a demora para responder, só vi seu comentário agora. :)

      Provavelmente a esta altura você já resolveu o problema. Mas vou responder caso alguém tenha a mesma dúvida. Pelo que você está descrevendo faltou definir a tag viewport para dispositivos móveis.

      Basta colocar entre as tags head:

      Um abraço!

  • Carlos Tiago

    Excelente post! facilita muito o entendimento. Parabéns! Favoritei o blog!

  • Marcos Lourenço

    Um dos melhores posts sobre o assunto. Otimas dicas. Parabéns.

  • Gustavo Ferreira

    Uau, ótimo post Dani!
    Parabéns!

  • Neto

    Dani,
    Ha um tempo atras assisti um video do Leandro onde ele disse que iria disponibilizar os media queries que vcs normalmente utilizam (600px, 1024, 768, etc)
    Tem como vc nos passar esse arquivo ?

  • Neto

    Dani, surgiu uma duvida aqui:
    Percebo que quando estamos redimensionando o browser num desktop/laptop, as medias queries device (min-device-width, max-device-width, etc) nao sao disparadas.

    Sendo assim, elas so funcionam pra smarthphones, tablets ?!?

    Outra coisa, entao eu faria 2 medias queries ? Uma com max-width (pra ser disparada via browser) e uma com max-device-width (pra ser disparada via tables, smartphones) ?

    Valeu

    • http://www.popupdesign.com.br/ Leandro Lima

      Oi Neto, beleza?

      Você colocou a metatag do Viewport?

      Se você não colocar esta tag, não irá disparar as mediaqueris mesmo.

      Espero ter ajudado,

      Abraço,

      • Neto

        Sim….

        • http://www.popupdesign.com.br/ Leandro Lima

          Oi Neto,

          Aqui está um código de exemplo que eu usei no meu DevCast. Acredito que ele pode te ajudar.

          http://www.popupdesign.com.br/Database/HTMLResponsivo.zip

          Abraço.

          • Neto

            Valeu

          • Neto

            Leandro,

            Aqui chegou no ponto que eu queria.

            Olhando o seu arquivo em nenhum momento usamos MAX-DEVICE-WIDTH, somente usamos o max-width.

            Entao posso considerar que nao preciso usar as configuracoes device ?
            Por ex no caso dessa media query visando iPad abaixo:

            @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

            EU PODERIA USAR E FUNCIONARIA ?
            @media only screen and (min-width : 768px) and (max-width : 1024px)

            Pq sempre que leio sobre breakpoints de ipad/iphone eles usam o max-device-width, so que isso nao funciona no browser do computador.

            Desculpe o pq de tantas perguntas…
            Sou um grande fa de vc e da Dani, sigo e recomendo sempre…
            Valeu

          • http://www.popupdesign.com.br/ Leandro Lima

            Oi Neto.

            Então, quando você usar o “Device”, ele vai funcionar somente em… devices! :P O monitor é um desktop, não um dispositivo mobile… Se você colocar só o min-width, max-width, ele irá atender a qualquer tipo de tela, não apenas a mobiles.

            Espero ter ajudado! ;)

            Abraço,

      • Neto

        Olha so Leandro, criei um html qualquer so pra mostrar que nao rola.
        Pq sera ?

        My first styled page

        /* Smartphones (portrait and landscape) ———– */
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
        {
        body
        {
        font-size: 100em;
        color: orange;
        }
        }

        /* Smartphones (landscape) ———– */
        @media only screen and (min-width : 321px)
        {
        }

        /* Smartphones (portrait) ———– */
        @media only screen and (max-width : 320px)
        {
        }

        /* iPads (portrait and landscape) ———– */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
        {
        body
        {
        font-size: 1000em;
        color: red;
        }
        }

        /* iPads (landscape) ———– */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
        {
        body
        {
        font-size: 50em;
        color: yellow;
        }
        }

        /* iPads (portrait) ———– */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
        {
        body
        {
        font-size: 30em;
        color: magenta;
        }

        /* iPads (portrait) ———– */
        @media only screen and (min-width : 768px) and (max-width : 1024px)
        {
        }

        /* Desktops and laptops ———– */
        @media only screen and (min-width : 1224px)
        {
        }

        /* Large screens ———– */
        @media only screen and (min-width : 1824px)
        {
        }

        /* iPhone 4 ———– */
        @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)
        {
        /* Styles */
        }

        Home page

        Musings

        My town

        Links

        My first styled page

        Welcome to my styled page!

        It lacks images, but at least it has style. And it has links, even if they don’t

        go anywhere…

        There should be more here, but I don’t know what yet.

        Made 5 April 2004

        by myself.

  • Leonardo Machado

    Estou testando um código responsivo em meu smartphone, Motorola Razr D3, no firefox do mobile ele muda certinho o css ao mudar a orientação de portrait para landscape ou vice-versa. Porém no google chrome do mobile ele não muda, mudamos a orientação e ele continua igual.

  • Leonardo Machado

    Outra coisa, no firefox ele mostra width: 480px e no chrome 320px…Porque ? Não entendi e não encontrei respostas ainda.

  • Leonardo Machado

    Já resolvi o problema da orientação, era problema com o min/max device-width, usando só o min/max width foi resolvido. CONTINUO COM O PROBLEMA/DÚVIDA DE PORQUE A LARGURA DE MEU NAVEGADOR CHROME É 320px e NO FIREFOX É 480px. Lembrem-se to testando direto no smartphone, meu código responsivo.

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Leonardo!
      Desculpe a demora para responder. A esta altura você já deve ter encontrado uma solução e é bem difícil dizer qual é o problema sem ver o seu código. Mas posso te dar duas sugestões caso alguém tenha a mesma dúvida:
      1. Verifique se o seu navegador é compatível com Media Queries.
      2. Verifique se você determinou a meta-tag viewport corretamente.
      Um abraço e boa sorte!

  • Moisés de Lima

    Tenho outra solução para max-width 100% no ie, /http://blogholmes.com.br/postagens/ler/348-max-width-100-em-imagens-no-internet-explorer. Ótimo artigo.

  • http://paradokset.carbonmade.com/ Rodrigo

    Olá a todos!
    Estava aqui fazendo umas pesquisas sobre o uso de tabelas em uma interface responsiva (mas o uso semântico delas, onde são exibidos dados e tal), mas me senti perdido e não sei se encontrei uma solução.

    Vamos tomar por exemplo a solução que eu encontrei no CSS-Tricks (http://css-tricks.com/responsive-data-tables/), onde ele usa “td:nth-of-type(…):before” e a propriedade content. O próprio autor diz que é apenas uma potencial solução, que não é perfeita, principalmente por causa do… (adivinhem?) IE!

    Queria saber se o Moderniz, por exemplo, resolveria esses problemas encontrados no uso de tabelas “responsivas”:
    – Com o Modernizr, o IE entende os :nth-of-type?
    – E também é possível definir display:block para a tabela se eu usar o Modernizr?
    – O IE também passa a entender as media queries?

    Tem hora que é difícil encontrar uma solução segura e definitiva para os problemas (ou desafios) do desenvolvimento responsivo, principalmente pra quem tá começando a trabalhar com responsividade…

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Rodrigo,

      Infelizmente isto é uma verdade. Não existem soluções definitivas. Nem para design responsivo, nem para a maior parte dos problemas de desenvolvimento web. É parte do desafio de atuar em um mercado de trabalho onde a evolução é constante. A cada dia surgem novos dispositivos, novos browsers, novos sistemas operacionais e com eles também novos conflitos. É algo que você precisa estar pronto para lidar.

      Tendo isto em mente, vamos as suas dúvidas.

      O Modernizr não “faz” o IE ler nenhuma variável de CSS. O que ele cria são classes alternativas de fallback. Ou seja, ele detecta se o browser possui aquela funcionalidade e, caso não possua, ele te deixa exibir um estilo alternativo. Por exemplo, vamos supor que você esteja usando um efeito de gradiente por CSS. O Modernizr vai detectar se o browser aceita este atributo e, caso não aceite, ele criará automaticamente a classe .no-cssgradients dando a você a possibilidade de criar estilos alternativos (um efeito gradiente por imagem, por exemplo) para aquele caso.

      – A questão do nth-type pode sim ser resolvida por JavaScript.

      – Não. Os IEs antigos não possuem suporte a Media Queries. Não vai acontecer nada de “ruim” como seu layout, ele apenas não será responsivo.

      – Se você estiver procurando uma solução para tabelas responsivas via JS experimente esta da Zurb:
      http://zurb.com/playground/responsive-tables

      • http://paradokset.carbonmade.com/ Rodrigo

        Obrigado por se dispor a tirar minhas dúvidas, Dani.
        Só a respeito de um item:
        “- Não. Os IEs antigos não possuem suporte a Media Queries. Não vai
        acontecer nada de “ruim” como seu layout, ele apenas não será
        responsivo.”
        O que eu quis dizer é se algum plugin consegue resolver isso, sei que os IE antigos nativamente não tem esse recurso, mas acho que algo como o “respond.js” ou parecidos dão um jeito nisso né?

        De qualquer forma, obrigado novamente pelos esclarecimentos =D

        • http://www.popupdesign.com.br/ Dani Guerrato

          Sim. O respond.js pode ajudar. Mas ele só funciona para alguns atributos e causa problemas com algumas classes de CSS, pode causar lentidão, etc. É uma solução paliativa mas, se quer minha opinião sincera, um usuário de IE6 não necessariamente precisa desta função, já que ele provavelmente está utilizando um computador antigo e, neste caso, performance deve ser a prioridade… Eu pessoalmente prefiro uma abordagem de graceful degradation do que forçar browsers antigos a terem funções novas a qualquer custo.

          De qualquer forma, de uma olhada no plugin https://code.google.com/p/css3-mediaqueries-js/ já que ele possui algumas funções mais avançadas que o respond.

  • Alex

    Show, nunca li um artigo tão rico sobre o assunto. Está de parabéns!!! :D

  • Plínio

    Muito obrigado pelas dicas, serviram muito aqui para a nossa empresa!

  • Adamo Alighieri

    Olá Dani, tudo bem?
    Li todos os seus artigos sobre design responsivo, achei ótimas refeências. Mas ficou uma dúvida.
    Com relação a utilização de sprites, como o design responsivo trabalharia junto com essa técnica?

    Abraço

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Adamo, tudo certo?

      Com relação a sprites você pode implementar normalmente, utilizando valores em porcentagem no atributo background position de cada elemento.

      Um abraço!

      • Adamo Alighieri

        Obrigado Dani!

  • João Gustavo

    Muito bom o post, Parabéns!!

  • Edson Almeida

    Esse código vale para blogger?

  • Caranga

    Excelente! Gostei bastante. Parabéns!

  • Fernando

    Parabéns pelo excelente texto, diagramação e didática! Sucesso !!!

  • Joao Maciel

    Muito bem explicado parabéns!

  • Kako

    Post antigo mas ainda me ajudando.parabéns

  • Ivan

    Dani, bacana as informações… Todavia, meu caso é o contrário. Baixei um template responsivo, mas em alguns dispositivos ele fica meio desconfigurado, então gostaria de desativar pro meu blog ficar com uma aparência fixa. Como faço isso? Valeu. Abraço.

  • http://www.www.cargocollective.com/ritadecassiap Rita de Cássia de Paula

    Dani, o que você acha do Bootstrap pra ajudar no desenvolvimento com layout líquido?

  • Matheus Delatorre

    Olá Dani, curti esse tópico. Comecei a buscar mais informações a partir dele. Valeu!
    Tenho uma dúvida aqui:
    Quando visualizo o site a partir de um dispositivo móvel ou tablet(não são todos) e clico em um formulário para reenche-lo, o layout é quebrado e nem imagino o motivo. Sabe me dizer qual poderia ser a solução?

    Flws!!!

  • Danilo Agostinho

    Excelente post Dani!

    Mudou muita coisa desse tempo pra cá, depois da criação do post?

    Amei as dicas, os links…

    Já implementei algumas coisas em meus testes, :D

    Obrigado por compartilhar seu conhecimento! ;)

  • Jonatan Passo

    Olá Dani, gostei muito do Post, porem quando fui por na prática tive algumas dificuldades, se possível me dê uma ajuda. Bom tentei fazer as adaptações com as resoluções que você postou como exemplo neste poste, porem só consegui fazendo de outra maneira, quero saber se da forma que fiz esta correto ou não. O resultado você pode conferir aqui acomacgo.com.br/index.php/gerenciar, estou entrando em conato por aqui por que não achei nenhuma outra forma de contato com você. Espero que possa me dar uma luz.

    @media only screen and (min-width : 20em) { /**/ }

    @media only screen and (min-width : 23.4em) { /**/ }

    @media only screen and (min-width : 30em) { /**/ }

    @media only screen and (min-width : 35.5em) { /**/ }

    @media only screen and (min-width : 37.5em) { /**/ }

    @media only screen and (min-width : 40em) { /**/ }

    @media only screen and (min-width : 64em) { /**/}

    @media only screen and (min-width : 80em) { /**/ }

  • Tigo Nine

    Oi Dani td bem? Também gosto de bandas de Heavy metal desconhecidas, poderia me passar o nome de algumas bandas? Curti bastante seu blog e aprendi também… Obrigado!!!

  • Luiz Campos

    meu antivirus bloqueia seu site e diz que é malicioso. msm assim o artigo é bom.

  • Anderson Vicente da Silva

    Tive problemas em um design responsivo pois não ficava corretamente em dispositivos Iphone, mas consegui após muitos testes resolver meu problema, por isto compartilho aqui.

    No meu caso bastou inserir as informações de viewport mas com parâmetros alterados, inicial de 0.5 e final de 1.0, desta forma consegui fazer rodar nos dispositivos móveis da apple….fica a dica!

    Abaixo código a ser implementado antes da Tag

    Parabéns pelo post, excelente conteúdo!

    • http://www.popupdesign.com.br/ Leandro Lima

      Opa cara! Que legal que resolveu… Só uma dica de usabilidade:

      Você pode tirar o maximum-scale e o user-scalable. Isso trava o zoom do usuário, e é péssimo, principalmente para deficientes visuais. Já vi queixas de pessoas com dificuldade de visão reclamando que sites que travam o zoom são mais difíceis de ler.

      Tem um post meu em que eu dissequei toda a tag viewport. Espero que te ajude:

      http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/

  • Guilherme Almeida

    Qual a diferença entre ‘width’ e ‘device-width’ e quando eu devo usar device-width ?

  • Guilherme Audi Bernardo

    Dani, obrigado pelo seu post super caprichoso! Ainda tenho uma dúvida.. Fiz um aspzinho com css responsivo, que funciona bem quando dimensiono a janela pelo Desktop; mas quando vejo pelo mobile, é como se ele não fosse responsivo, como se ele não entendesse que estou vendo de um dispositivo mobile. Usei o @media only screen and (max-width : 320px), tentei mudar de 320 pra 400, 500 e 600.. no celular, dá tudo igual! Ele não ajusta, simplesmente. Será que sabe me ajudar? Obrigado!!

    • http://www.popupdesign.com.br/ Dani Guerrato

      Oi Guilherme, tudo certo?

      Você configurou a tag viewport? Pela sua descrição parece ser este o problema. O Leandro escreveu um artigo sobre este tema aqui no Blog: http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/

      Abraços!

      • Guilherme Audi Bernardo

        Era isso mesmo, Dani, a tag mágica! Obrigado!!

  • http://einconformado.blogspot.com Vítor

    Série muito boa, Dani! Você escreve muitíssimo bem! Uma dúvida: é possível aplicar estilos a determinado item apenas na página inicial de um blog e com determinada resolução? Teoricamente, no Blogger, seria algo como:

    {.estilo-que-pretendo-aplicar…}

    … mas, ao que me parece fazer dessa forma não é possível. =

    P.S.: Erro de formatação do possível código por conta do próprio Disqus. =]

    • http://www.popupdesign.com.br/ Leandro Lima

      Oi Vitor,

      É possível sim, mas não com esta tag que você colocou. Você teria que usar via CSS, selecionando a resolução via media querie.

      Se você quiser apenas na página inicial, você poderia aplicar dentro de um na própria página inicial ou criar um arquivo de css que só será carregado na home.

      Espero ter ajudado e obrigado por comentar!

      Abraço! ;)

      • http://einconformado.blogspot.com Vítor

        Ajudou sim, Leandro! Utilizei a segunda sugestão, colocando as especificações da media queria com o estilo css específico dentro da tag condicional da página inicial e, graças ao bom Deus, funcionou! Muito obrigado mesmo pela ajuda, meu caro! Que Papai do céu guarde vocês sempre! Continuem com o ótimo conteúdo! Abração! Segue o blog: http://einconformado.blogspot.com =]

  • Rafael

    Olá, excelente post, foi muito útil!
    Desculpe a chatice, mas apenas com o intuito de colaborar e melhorar, deixo aqui uma correção:
    “Media Queries” é o plural de “Media Query”. Logo, quando você estiver falando no singular no seu texto não deve usar “media querie” (não existe) e sim “media query”. No inglês o plural das palavras terminadas em Y é sempre IES. Espero ter ajudado. :)

  • pedroorf

    adore seu artigo.

Postamos coisas legais aqui


Google

Adicione no GOOGLE+

Instagram

Siga nosso perfil no INSTAGRAM

Quer utilizar o conteúdo do BlogUp?

Gostamos de compartilhar conhecimento por isto os textos sa seção Blog são licenciado sob Creative Commons com as condições: Atribuição - Não Comercial - CompartilhaIgual.

Em português claro, você pode reproduzir este artigo se cumprir TODOS os requisitos:
1. Ninguém esteja lucrando nada em função disto.
2. Exista crédito para a PopUp Design e o autor do post em um local claro com link para o conteúdo original.
3. O material derivado seja distribuido da mesma maneira.

Obs 1. Leia a licença completa para entender todos os termos.
Obs 2. Se o seu site tiver qualquer tipo de anúncio, como AdSence, por exemplo, isto já é considerado fim comercial e portanto você não pode reproduzir o texto.
Obs 3. Se você gostaria de utilizar este material sob outros termos e/ou possui dúvidas envie um e-mail contato@popupdesign.com.br e requisite uma autorização.