Leandro Lima

Desenvolvimento Responsivo e Viewport

Por | Comentários: 29

Veja como trabalhar com uma das tags fundamentais do desenvolvimento responsivo, descubra os diferentes tipos de pixel e saiba o que esperar para o futuro.

Você estudou muito, quebrou a cabeça, planejou, resolveu bugs e, finalmente, seu projeto responsivo está pronto. Testou no seu desktop e tá bonitão. Você redimensiona o navegador e vê a mágica acontecer. Testou em serviços online, como o responsinator, e tá tudo muito lindo! Aí veio aquela hora de testar ao vivo no mobile… a expectativa é alta e… nada acontece. Abre como um site comum de 980px. Mas você fez tudo certo! O que acontece, afinal?

Bom, muito provavelmente você esqueceu de especificar o Viewport do seu projeto. Se acalme, não é nada tão grave. Neste artigo, quero levar você a conhecer mais sobre o assunto, mostrar o que está surgindo de novo e porque ele é fundamental quando estamos desenvolvendo um projeto responsivo.

Declarando viewport

Bate-bola, jogo rápido: coloque isso entre as tags <head> do seu código:

De tudo o que você for ler sobre o assunto, decore isso. Anote em papéis, faça uma tatuagem, nomeie seu filho com esta linha ou – sendo mais prático – coloque em seu boilerplate para iniciar o seu projeto. O importante é não esquecer.

Eu poderia ser simplista e parar por aqui. Mas não sou. E você que está lendo este post também não é. Além de estudioso, também é um curioso. E pessoas curiosas gostam de saber como tudo funciona. Então, como bons curiosos, vamos começar entender o por que disso tudo.

O pixel que não vale um pixel

Basicamente, 1 pixel é a menor unidade de uma imagem digital. As imagens projetadas na sua tela são formadas por milhares de pontinhos, e cada pontinho é 1 pixel. O tamanho e a quantidade de pixel apresentados vai variar de acordo com a densidade da tela. E, como veremos, vai variar também de acordo com o que estamos medindo.

No webdesign é comum tratarmos um pixel como uma medida exata, embora não seja. E isso não é um erro. Acontece que existem três tipos de pixel diferente a serem levados em consideração e, desses três, apenas 2 interessam: o CSS pixel e o pixel do dispositivo, que podem ter o mesmo valor. Temos também o “dpi pixel”, mas ele não é tão importante para o webdesign.

Como a Dani Guerrato falou em seu artigo “Design Responsivo e Retina Display”, até pouco tempo atrás era comum presumir que, para monitores a resolução era de 72dpi. Com o tempo, o padrão se tornou 96dpi. No entanto, começaram a surgir telas com uma densidade de pixel cada vez mais alta, o que criou uma pluralidade grande de resoluções e dpis espalhadas por ai. No caso de smartphones, os modelos mais em conta tem uma densidade menor do que os top de linha.

O dpi é a quantidade de pixels que cabe em uma polegada. Dizer que uma tela tem 300dpi significa que, para cada polegada, temos 300 “pontinhos” formando a imagem. Isso permite resoluções muito maiores em telas que tem fisicamente o mesmo tamanho. Um iPad com tela retina, por exemplo, tem a resolução de 2048×1536, enquanto um iPad sem tela retina tem a resolução de 1024×768. No entanto, os dois aparelhos tem, fisicamente, telas do mesmo tamanho. A diferença é que o dpi do iPad com tela retina é o dobro da tela de seu antecessor. Para fins didáticos, neste post chamarei essa medida de “dpi pixel”.

Para nós, webdesigners que vamos trabalhar essencialmente com CSS, o “dpi pixel” só será importante para pensarmos na resolução das imagens do nosso projeto. O que nos interessa aqui é o CSS pixel.

O CSS Pixel é a medida usada no CSS para declaramos o tamanho de um objeto. Por exemplo: ao declarar “font-size: 16px”, estamos informando ao browser que o tamanho do texto é de 16 CSS Pixel.

Em desktops e notebooks, na maioria das vezes, o tamanho do CSS Pixel equivale ao tamanho da largura e altura da resolução que você está utilizando. Mas, em monitores de altíssima resolução isso faria com que alguns elementos ficassem muito pequenos. Para contornar este problema, em telas de alta densidade o CSS pixel equivale a mais do que 1 dpi pixel.

Exemplo: um iPhone sem a tela retina, por exemplo, tem 163dpi. Um iPhone com a tela retina tem 326dpi. Em teoria, isso significa que o tamanho da resolução do iPhone com a tela retina é duas vezes maior do que o iPhone sem retina. Mas os elementos são sempre do mesmo tamanho. Isso acontece porque, no iPhone com tela retina 1 CSS Pixel equivale a 2 DPI Pixel.

css-pixel-vs-dpi-pixel

O pixel físico de seu aparelho

Para dispositivos móveis, temos um terceiro tipo de pixel: o “device-pixel”. Ele, basicamente, representa a largura do seu aparelho em pixels quando comparado a um monitor com 96dpi.

Ficou difícil? Vou exemplificar. Pega um monitor grande com 96dpi. Coloque o seu dispositivo movel na frente dele. Meça quantos pixels da tela o aparelho ocupa. Teremos ai a quantidade de pixels físicos do aparelho. É comum pensarmos em celulares em pé com 320px de largura. Este foi o padrão criado pelo primeiro iPhone, e muitos smartphones o adotaram no começo.

O pixel físico, ou “device-pixel” corresponde ao tamanho da tela do seu aparelho. Isso é diferente da resolução. E, hoje em dia, com a quantidade cada vez maior de tablets e smartphones é cada vez mais difícil encontrar um padrão. Acredito que esta lista do i-skool pode te ajudar nessa tarefa.

graphic-arrays-1-2000-800x494

E, finalmente, o Viewport

Viewport, basicamente, é a porção visível do seu site. Em um desktop ou notebook, o padrão é que o Viewport seja a largura em pixels do seu navegador. Se você redimensionar o browser, verá menos do site. Logo, o Viewport será menor. Por seguir este padrão, conseguimos ver todo o trabalho que fizemos de responsividade em nosso projeto apenas redimensionando a largura da janela do seu browser. Se você está modificando a largura do seu viewport, as @media-queries começam a ser lidas e a mágica acontece.

Em um dispositivo móvel a coisa é bem diferente. Basicamente, não existe como redimensionar a tela do navegador de seu celular. Todos os aplicativos ocupam 100% da largura. No começo dos smartphones, onde ainda não se falava em desenvolvimento responsivo, foi preciso contornar este problema. Seria muito trabalhoso abrir um site e ver apenas uma porção pequena dele. Teria barra de rolagem para todo lado e o conteúdo apresentado seria muito pequeno. Pensando nisso, foi padronizado que o Viewport de mobiles seria de 980px.

Basicamente, se não existe a meta-tag viewport declarada, o dispositivo móvel irá encolher seu site para mostra-lo com a largura de 980px. Em sites que não são responsivos, eles ficam como miniaturas quando acessados pelo mobile. Veja o exemplo do nytimes.com.

nytimes

Essa miniaturização do visual do site irá influenciar em todo o comportamento do seu CSS Pixel!

Simplesmente deixar o site encolhido não é uma boa opção. Os textos encolhidos são ruim de ler, os links pequenos são difíceis de serem tocados. Simplesmente tem uma usabilidade horrível no celular. Para efeito de comparação, note como o site da revista Time, este sim responsivo, é muito mais gostoso e fácil de ler em uma tela pequena:

time

Vamos brincar de pensar na lógica da coisa: você está em um celular com a largura física de 320px. Este celular tem uma tela de alta resolução, com 326dpi. Isso quer dizer que para cada 1 pixel físico, teremos 2 “dpi pixel”. Logo, a resolução do celular em “dpi pixel” é de 640px. E o nosso viewport está no padrão de 980px. Obviamente que estes 980px não ocupam os mesmos 980px de seu monitor. Cada 1 css pixel dos 980px está menor, para que todos caibam dentro dos 640 dpi pixel do smartphone. Em uma conta rápida descobrimos que, neste caso, 1 css pixel equivale a menos que 1 dpi pixel. Assim, todos os textos, imagens e elementos do seu site ficam menores para caber dentro da tela.

Não se preocupe, você não precisa decorar esta formula e ficar fazendo conta. Saber essas informações é apenas uma curiosidade bacana. O que precisamos ter em mente sempre é: a quantidade de pixel físico do seu aparelho para declarar nos @media-queries e os valores em CSS pixel confortáveis para a leitura e visualização do seu site.

Basicamente, o CSS pixel do seu site (e gostaria de deixar muito grifado aqui a parte “do seu site”, pois isso muda quando pensamos em design de apps) é sempre relativo a viewport que está sendo utilizada.

Especificando a largura do meu viewport

Sabe aquela linha de código que tem bem no começo deste post? Então, é ela que utilizaremos para dizer qual é o nosso campo de visão do navegador.

Repare que no parâmetro “width” nós utilizamos a medida “device-width”. Isso avisa ao navegador que a porção visível do meu conteúdo será equivalente a largura dos pixels físicos do meu dispositivo. Em um smartphone com 320px de largura, o meu viewport é de 320px.

Eu posso determinar um valor exato para essa medida. Para isso, é só substituir o “device-width” pelo tamanho desejado. Por exemplo:

Desta forma, eu irei visualizar apenas 800px da largura do meu layout.

E por que isso é a pedra filosofal para que o meu design responsivo funcione?

Ora, você é um cara antenado. Leu o post 1, 2 e 3 da Dani Guerrato sobre Design Responsivo. Assistiu, também, o Devcast que eu dei sobre o tema. E entendeu todo o assunto.

Isso quer dizer que você não usou medidas absolutas para desenvolver seu código. Seja usando um pré-processador ou fazendo todas as contas na unha, você está medindo o seu site em porcentagem (%) e “em”.

Utilizar uma medida absoluta na largura do seu site significa dizer que, ao aplicar um viewport de 320px o browser não irá visualizar o conteúdo inteiro. Se no container do seu site você declarou o valor de 960px, por exemplo, irá aparecer uma barra de rolagem horizontal para que você consiga acessar todo o conteúdo.

Utilizar porcentagem como medida de tamanho de um elemento significa que ele ocupará uma determinada porção da parte visível do seu navegador. Se determinarmos que a largura do site é de 100% em um viewport de 320px ela equivalerá (pasmem) 320px e, em um viewport de 1400px ela equivalerá a (pasmem novamente) 1400px.

iPhone5-dpi-pixel

Declarar o viewport para o seu site é fundamental para o funcionamento dos @media-queries. Quando digo que um @media-querie irá atuar com a max-width: 400px, é da largura do viewport que estamos falando. Ou seja, quando o viewport for menor que 400px, ele irá ler os comandos de CSS do @media-querie.

E o que o CSS pixel tem a ver com isso? Ora, se declaramos que a largura do viewport é a mesma largura do nosso dispositivo móvel, também estamos dizendo que o tamanho do CSS pixel é o mesmo do pixel físico do aparelho. Assim, temos garantidos que 16px em uma tela desktop terá o mesmo tamanho no tablet e smartphone.

Outros parametros do viewport

Se você prestar atenção na linha de código que escrevi neste post, notará que não estou falando só da largura do meu viewport. Também estou dizendo que a escala inicial dele equivale a 1. Veja o valor do parâmetro “initial-scale”:

Isso quer dizer que o site não iniciará com o Zoom ativado. Ele irá renderizar os elementos no tamanho do CSS pixel no tamanho real deles.

Dar zoom no celular não irá alterar a viewport. Ele não irá realinhar seus elementos ou ler outros @media-queries. Ele irá apenas aumentar ou diminuir o tamanho de tudo. É comum que, ao dar zoom, o usuário consiga scrollar o site horizontalmente. Isso não significa que a viewport foi alterada, mas sim que a escala dos elementos foi modificada e ocupa um espaço maior na tela.

É possível, através da meta viewport, especificar qual é o máximo e o mínimo de zoom que o usuário pode dar. Também é possível travar o zoom. Isso é um soco no estômago da UX, e eu não recomendo que faça em nenhuma situação. É bem importante deixar o usuário decidir o quão ele quer aproximar ou distanciar os elementos. Muitas vezes um usuário com problemas de visão utilizam muito o zoom para facilitar a leitura.

Para definir qual é o zoom máximo e mínimo que o usuário pode dar, utilizamos o parâmetro “minimum-scale” e “maximum-scale”. No exemplo, o usuário pode aumentar o tamanho dos elementos em até 4 vezes e diminuir em até 0.5 vezes.

Para travar o zoom, usamos o “user-scalable=no”

Mais uma vez: não trave o zoom do usuário. Estou mostrando isso aqui para fins didáticos, mas não é recomendável que você o faça. A não ser que você tenha uma desculpa muito boa e motivos muito convincentes, nunca proíba o usuário de fazer isso.

@viewport

A meta-tag viewport nunca foi uma especificação da W3C. Foi algo criado pela Apple para que, nos primeiros modelos do iPhone, os sites abrissem corretamente. Rapidamente este padrão foi adotado por todos os navegadores. Assim, utilizar esta tag é um padrão não-normativo. Ou seja: apesar de aceito, nunca foi um padrão formal da W3C.

Assumindo que a meta “viewport” é diretamente ligada ao layout e diagramação do site e não à marcação de conteúdo, faz sentido que ela seja um parâmetro de CSS, não de HTML. E é esta regra que a W3C está criando: @viewport. Declaramos ela como no exemplo abaixo:

Ao colocarmos isso no começo do nosso CSS, estamos dizendo exatamente a mesma coisa que a meta-tag “<meta name=”viewport” content=”width=device-width, initial-scale=1″>”. A diferença é que agora, ao invés de chamar “initial-scale”, estamos dizendo apenas “zoom”.

Os parâmetros minimum e maximum-scale agora são min- e max-zoom:

E o “user-zoom” é equivalente ao “user-scalable”. Para travar o zoom, basta colocar o “user-zoom” como “fixed”:

E, podemos também utilizar o parâmetro “orientation”, que pode ser “auto”, “portrait” ou “landscape”. O que acontecerá é que o seu layout pode ficar fixo em uma única orientação do seu dispositivo móvel (retrato ou paisagem), ou você pode usar o “auto”, onde o seu site irá girar junto com o celular. Por padrão, este parâmetro está sempre em “auto”.

É possível também utilizar o @viewport dentro dos @media-queries. Assim, você pode conseguir uma padronização maior do seu CSS. É especialmente útil se você está fazendo o design adaptivo, não o responsivo.

Veja o exemplo:

Aqui estou dizendo que em telas com a largura maior que 640px e menor que 1024px o viewport será sempre de 700px. Pode ser útil caso você necessite de uma padronização bem grande de seu layout. Pessoalmente, eu não vejo uma grande utilidade disso em design responsivo, mas é interessante quando estamos trabalhando com design adaptivo ou quando pegamos o código de terceiros para torna-lo responsivo. No entanto, eu ainda gosto mais do layout fluindo pixel a pixel.

Ah, e se você quiser saber a diferença entre o Design Responsivo e Adaptivo, é só dar uma lida nessa entrevista com a Dani para a revista da Locaweb. É bem esclarecedor. ;)

Infelizmente o @viewport não é aceito em todos os browsers. O primeiro navegador a aceita-lo foi o IE10 (e você gosta de xingar o IE, né?). As versões mais recentes do Opera e do Chrome também o aceitam bem. Acredito que o Firefox não demorará a ser compatível.

Para o IE e o Opera você deve declarar com os respectivos prefixos -ms- e -o-. A sintaxe fica assim:

Medidas relativas de Viewport para tipografia (vw e vh)

Este parâmetro é novo, e é suportado pelo IE10+, Firefox 19+, Chrome 20+ e Safari 6+. Dos browsers mobile, apenas pelo Safari do iOS 6 ou superior.

O que este parâmetro diz é que a fonte ocupará uma porcentagem do viewport. Afirmar que a minha font-size tem 1vw significa que ela terá sempre o tamanho de 1% da largura do meu viewport.

A unidade de medida “vw” se refere a largura do viewport e a “vh” a altura.
Para facilitar:

Isso é especialmente interessante quando se está trabalhando com um texto que não é possível alterar a quantidade de palavras por linha em seu conteúdo. Aqui temos um vídeo disso funcionando:

Se liga então na hora da revisão

Ufa! Quanta coisa para só uma linha de código. Mas, não se preocupe que preparei uma revisão para auxiliar seus estudos. Vamos lá:

Viewport: porção visível do seu site no navegador aberto. Em browsers, por padrão, é sempre a largura da sua janela. Em dispositivos móveis, na sua maioria, é 980px por padrão. Isso pode ser alterado através da meta-tag Viewport ou do parâmetro de CSS @viewport.

DPI Pixel ou Pixel Real: Número REAL de pixels na tela do seu dispositivo. Dizer que um aparelho tem 300 dpi significa que ele tem 300 pixels por polegada.

Pixel Físico ou Device Pixel: o tamanho físico do seu dispositivo medido em pixels quando comparado a um monitor com 96dpi. Quando declaramos que a largura do viewport será a largura do meu dispositivo (width=device-width), estamos dizendo que a porção visível do site equivale ao tamanho do seu aparelho. Com o número cada vez maior de dispositivos móveis no mercado, existem cada vez mais viewports diferentes.

CSS Pixel: representa o pixel declarado no CSS. Varia de tamanho de acordo com o viewport declarado. Quando estamos trabalhando com o viewport do tamanho do dispositivo, 1 CSS pixel equivale a 1 Pixel físico

@viewport: parâmetro CSS proposto pela W3C para substituir a meta-tag “viewport”. Por enquanto só é aceita pelo IE10+, Opera e versões mais atuais do Chrome.

Unidades de medida relativas ao viewport (vw, vh): são unidades para fontes, indicando que elas ocuparão uma porcentagem do Viewport. 1vw equivale a 1% da largura do Viewport enquanto 1vh representa 1% da altura do viewport.

Concluindo…

Uma linha de código pode fazer toda a diferença. Já conversei com desenvolvedores que fizeram o projeto inteiro responsivo, e muito bem feito, mas que não funcionava no mobile de jeito algum. Quando fomos analisar o código, vimos que estava faltando esta declaração.

Saber como funciona e estar antenado no que acontece de novo é importante para prevermos para onde o webdesign vai evoluir, e estarmos prontos para atender os mais diferentes dispositivos que se conectarão à rede no futuro. Já temos óculos e relógios que navegam pela internet. Imagine o que teremos no futuro! Estudar o desenvolvimento responsivo e todos os seus segredos é a melhor maneira de ficar preparado para o que virá depois.

Saiba mais:
Developer Mozila Network: manipulando a tag viewport para controlar o layout em dispositivos móveis
I-Skool: Webdesign for mobiles and tablets – viewport sizes
Quirks-mode: A pixel is not a pixel
CSS Tricks: Viewport sized typography

Tags: > , , , ,

Leandro Lima

Leandro Lima

Designer, palestrante, nerd e co-fundador da PopUp junto com a Dani Guerrato. É apaixonado por criatividade e tecnologia. Trabalha com UX Design e Design de Interfaces há mais de 8 anos. Adora jogar xadrez, é fã do Rubens Barrichello e acredita que o universo tem 10 ou 11 dimensões.

Você pode achar o Leandro por aqui: Facebook - Twitter - - Instagram - LinkedIn

  • pamasway

    Muito bom!!!

  • http://docequotidiano.com.br/ Anielle Casagrande

    ótimo! tb gostei do site no geral.

  • Sel Lima

    Ótimo artigo. Site muito bom. Parabéns.

  • Thassya Abreu

    ótimo artigo!! Parabens!!!!

  • Delmondes Rodrigo

    Nota 10! Excelente artigo…

  • http://www.creavistudio.com Creavistudio

    Muito bom. Tenho certeza que vai ajudar muita gente.

  • bruno

    Belissimo post. Tudo o que vc falou aqui o professor demorou (infelizmente) 1 semestre pra ensinar na faculdade, e eu ainda tinha dúvidas (talvez ele não soubesse do que estava falando)…rsrs…enfim, parabéns e continue assim!

  • John

    A forma como você explica é muito inteligente facilitando absurdamente o entendimento. Parabéns!

  • Martinho

    Olá Leandro! Muito bom o seu post, mas mesmo aplicando as dicas passadas aqui, ainda tenho um problema com o meu site. O Design Responsivo responde bem em alguns aparelhos, mas não em todos!!! Fiz o teste no http://www.studiopress.com/responsive/ e deu certo, mas quando vou verificar no meu celular o layout é o tradicional… Já viu algo parecido? Abraços e sucesso!

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

      Oi Martinho.

      Normalmente este erro é no viewport mesmo. Toda vez que vi problema deste tipo, o erro era nesta tag. Ela está escrita no código?

      • Martinho

        Essa linha “” está no .

        As referências abaixo estão no css:
        @-webkit-viewport { width: device-width; }
        @-moz-viewport { width: device-width; }
        @-ms-viewport { width: device-width; }
        @-o-viewport { width: device-width; }
        @viewport { width: device-width; }

        Testei a visualização no Iphone e alguns modelos da Samsung, mas no meu celular não funciona. Pensei na hipótese de ser problema do meu celular de ser antigo ou estar desatualizado, mas quando fui testar num Tablet também da Samsung e o problema persistiu, fiquei preocupado!

        O site em questão é http://www.elpelegrino.com.br onde coloco algumas experiências de estrada e pratico um pouco as experiências autodidatas em programação, ou seja, muito amadorismo.

        Talvez você consiga ver onde eu errei e possa me ajudar. Agradeço a atenção!

      • Martinho

        Encontrei o erro… Uma chave havia sido deletada, gerando o erro… Agora está funcionando bem em todos os aparelhos!

  • Thiago Guerra

    Oi Leandro, eu gostei na verdade até demais do seu post O.o”
    Bom, sou inexperiente e tô aprendendo agora, e me encontrei com um “pequeno” empecilho em relação às medidas viewport e adoraria que você me ajudasse ;)
    Enfim, 1vw ou vh é a mesma coisa que 1% da medida do meu viewport, e o problema é que quando eu aplico zoom tanto pra DIMINUIR ou aumentar, uma div, por exemplo, continua com o mesmo tamanho não acompanhando o resto do conteúdo que está em porcentagem…
    Você sabe como arrumar? Valeu

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

      Oi Thiago, tudo certo?

      Então, no Zoom você não muda o tamanho do Viewport, só “aproxima” a visão do texto. A ideia é que no Zoom as letras aumentem ou diminuam mesmo. É pra facilitar a leitura pra quem tem algum tipo de deficiência visual. Por isso, por mais que vc use medidas relativas, como vw ou vh, a letra não irá mudar de tamanho no zoom.

      Era essa a sua dúvida? :P

      Abraço,

      • Thiago Guerra

        Então, é que eu usei as medidas pra um slide porque eu colocava valores de porcentagem e ele sumia O.o
        Não sei se é certo, mas quando dou zoom pra aumentar ele vai se adaptando por causa das media queries kk’
        O problema é que quando diminuo o zoom da página (ex: 25%) ele continua grande por causa da medida viewport que não se alterou e fica muito irregular, quero arrumar isso.. Desculpa a imagem ruim .-.

  • http://www.cristofersousa.com.br Cristofer Sousa

    Leandro, bom dia, tudo bem?

    Muito legal seu tutorial, estou tendo uma dificuldade aqui, estou adotando que minha section possua min-heigth:100vh, porém o iphone 4 não reconhece essa unidade, com isso criei um media-querie para que pudesse tratar especificadamente para esse aparelho mas o problema é que ele é 320px de altura x 480px de largura. Essa é a medida de uma grande gama de aparelhos, enfim existe algum recurso que possa tratar esse problema especifico para os iphone antigos?

    No meu CSS global:

    section{
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height:100vh;
    position: relative;
    padding: 70px 0px 10px 0px;
    }

    Até peguei um formato de tratar o mq especifico para iphone porém ele faz o estilo ser global para todos devices nessa medida.

    /* iPhone 4 ———– */
    @media (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
    /* Styles */
    }

    Abraços

  • Maria

    Leandro e Dani, por favor, coloquem a data dos posts!

  • Vinícius

    Leandro, Parabéns pelo post, mas só na parte do VH/VW que ainda não uso,pelo fato de ainda não ser 100% compatível em dispositivos ainda populares apesar de “antigos”, tipo : iphone 4 etc… pra resolver isso, uso EM que é mais antigo e compatível com praticamente todos os smartphones populares.

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

      Cara, rola usar o VH e o VW sem medo! ;)

      O fallback é muito simples. Quando o navegador não entende a medida, ele simplesmente ignora. Assim, você declara PRIMEIRO a medida em PX ou em % e, logo em seguida, a medida em VH/VW.

      Ficaria assim:

      .class {
      height: 700px;
      height: 100vh;
      }

      Funciona da seguinte forma: como CSS é lido em cascata, os navegadores que leem esta medida sobrepõe o que foi declarado logo em cima, fazendo valer o VH/VW. Navegadores que não leem esta medida, ignoram o VH/VW e lê só a medida que veio antes! ;)

      Boa sorte… ;)

      • Vinícius

        Leandro, Obg pelo feedback, sei dessa possibilidade de fallback, mas por enquanto to conseguindo sobreviver com EM, que sou fã rs, sou chato com esse tipo de desenvolvimento rs, nessa sua solução o CSS ficaria maior, e não sou muito fã de fallback quando não é extremamente necessário, mas atualmente os projetos que desenvolvi funcionaram 100% com EM, uma dúvida que tenho é sobre o seguinte, em qual cenário o EM não vai suprir que o VH/VW vai fazer diferença?

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

          Cara, basicamente, a ideia é a gente separar a função de cada elemento.

          EM é quando você vai fazer algo relativo a fonte (em é uma medida tipográfica. Corresponde a largura da letra M da fonte selecionada). VH e VW é relativo ao tamanho do Viewport. É só você analisar a situação apra saber o que é melhor.

          Quanto a aumentar o CSS, ultimamente tenho feito alguns testes de performance em sites que usei este fallback. Cara, a diferença de performance foi nula! Por isso estou usando sem medo! ;)

          • Leleco Lelequinho

            Eu não entendo uma coisa, a largura real da tela do iphone 5 ilustrado na imagem é de 2,03 polegadas, e se colocarmos 2,03 polegadas na frente de um monitor de 96dpi’s não conseguimos atingir 320px, como pode o device-pixel do iphone 5 ser 320px?

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

            Oi Leleco. Devido a diferenças, muitas vezes mínimas, de monitores e device pixels, muitas vezes este número é arredondado. O fato é que a Apple adotou 320px para a maioria dos iPhones. Se não me engano, apenas o iPhone 6+ tem uma largura maior que isso! ;)

  • Hugo Almeida

    Leandro, Muito bom o post, Parabéns pelo compartilhamento de conhecimento, me ajudou muiiito Valeuuuuu

  • Lucas Rocha

    Cara Eu Te Amo <3
    Tava a dias querendo saber porque meu layout não funcionava no celular, ai você chega e resolve com uma linha de código

  • Rafael Nolêto

    Cara Eu Te Amo <3
    Tava a dias querendo saber porque meu layout não funcionava no celular, ai você chega e resolve com uma linha de código ²
    Na boa msm, EU TE AMO CARA!!!
    Eu já tava pra pirar com o Primefaces ¬¬

  • Diogo Machado

    Artigo excelente, parabéns Leandro!

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.