Guia para Unidades Viewport CSS vw, vh, vmin, vmax

Comprimentos da porcentagem de viewport, ou unidades de porta de visualização como são mais frequentemente referidos, são unidades CSS responsivas que permitem definir dimensões como uma porcentagem da largura ou do comprimento da viewport. As unidades de viewport podem ser bastante úteis nos casos em que outras unidades CSS responsivas, como porcentagens, são difícil de fazer trabalho.

Apesar Documentação do W3C nas unidades de viewport contém tudo o que pode ser colocado em teoria, não é muito detalhado. Então, neste artigo, vamos dar uma olhada em como essas unidades CSS trabalhar na prática.

Altura da janela de visualização (vh) e largura da janela de visualização (vw)

W3C define viewport Como “tamanho do bloco inicial contendo”. Em outras palavras, a porta de visualização é a área contido na janela do navegador ou qualquer outra área de visualização em uma tela.

o vw e vh unidades representam a porcentagem da largura e altura da viewport real. Eles podem pegar um valor entre 0 e 100 de acordo com as seguintes regras:

 100vw = 100% da largura da janela de visualização 1vw = 1% da largura da janela de visualização 100vh = 100% da altura da janela de visualização 1vh = 1% da altura da janela de visualização 

Diferenças para unidades de porcentagem

Então, como as unidades de porta de visualização são diferentes das unidades de porcentagem? Unidades percentuais herda o tamanho do seu elemento pai enquanto as unidades de viewport não. As unidades da porta de visualização são sempre calculadas como porcentagem do tamanho da viewport. Como resultado, um elemento definido pelas unidades de viewport pode exceder o tamanho de seus pais.

Exemplo: seções de tela inteira

Seções de tela cheia são provavelmente os casos de uso mais conhecidos de unidades de viewport.

o HTML é bem simples; nós apenas temos três seções em si e nós queremos que cada um deles cobrir toda a tela (mas não mais).

No CSS, usamos 100vh como um altura valor e 100% Como largura. Nós não usamos o vw unidade aqui como por padrão, barras de rolagem também são adicionadas para o tamanho da janela de visualização. Então, se nós usamos o largura: 100vw; governar um barra de rolagem horizontal apareceria no parte inferior da janela do navegador.

 * margem: 0; preenchimento: 0; seção background-size: cover; posição de fundo: centro; largura: 100%; altura: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Na demonstração do gif abaixo, você pode ver que vh é verdadeiramente uma unidade responsiva.

De acordo com os documentos do W3C, o acima mencionado problema da barra de rolagem horizontal pode ser resolvido adicionando o estouro: auto; regra para o elemento raiz. Esta solução só funciona parcialmente, Apesar. A barra de rolagem horizontal, de fato, desaparece, mas largura é ainda calculado com base na largura da janela de visualização (a barra lateral incluída), então os elementos serão um pouco maiores do que deveriam ser.

Eu diria que não ousaria usar o vw unidade em dimensionamento de elementos de tela inteira por esse motivo. Nós nem precisamos disso, como o largura: 100%; regra funciona perfeitamente. Com layouts de tela cheia, o verdadeiro desafio sempre foi como definir um valor de altura adequado e a vh unidade dá uma solução brilhante para isso.

Outros casos de uso

Se você estiver interessado em outros casos de uso vw e vh Lullabot tem um ótimo artigo que lista um punhado de exemplos da vida real (com demos Codepen), como:

• Cartões de taxa fixa.
• Mantendo um elemento menor que a tela.
• Texto de escala.
• Rompendo o contêiner.

O Opera.dev também tem um breve tutorial sobre como você pode tirar proveito do vw unidade em criando tipografia responsiva.

Você não pode usar apenas unidades de viewport no largura e altura propriedades, mas em qualquer outro. Por exemplo, você pode definir o tamanho de preenchimentos e margens usando o vw e vh unidades também.

Viewport min (vmin) & viewport max (vmax)

o vmin e vmax unidades permitem que você acesse o tamanho do lado menor ou maior da janela de visualização, de acordo com as seguintes regras:

 100vmin = 100vw ou 100vh, o que for menor 1vmin = 1vw ou 1vh, o que for menor 100vmax = 100vw ou 100vh, o que for maior 1vmax = 1vw ou 1vh, o que for maior 

Então, no caso de um orientação retrato, 100vmin é igual a 100vw, como a viewport é menor horizontalmente do que verticalmente. Pela mesma razão, 100vmax será igual a 100vh.

Da mesma forma, no caso de orientação paisagem, 100vmin é igual a 100vh, como a viewport é menor verticalmente do que horizontalmente. E claro, 100vmax será igual a 100vw Aqui.

Exemplo: Faça textos de heróis legíveis em todas as telas

o vmin e vmax unidades são muito menos conhecidas do que vw e vh. No entanto, eles podem ser usados ​​de forma excelente como substituir a orientação @meios de comunicação consultas. Por exemplo, vmin e vmax pode ser útil quando você tem elementos que podem parecer estranhos em diferentes proporções.

O Novo Código tem um ótimo tutorial no qual eles discutem como você pode mantenha o texto do herói legível em todas as telas, usando o vmin unidade. Textos de herói são propensos a olhar muito pequeno no celular e muito grande em monitores grandes.

Aqui está a ideia principal de sua solução:

 h1 tamanho da fonte: 20vmin; família de fontes: Avenir, sans-serif; font-weight: 900; texto-alinhar: centro;  

Na demonstração do Codepen, você pode conferir como vmin resolve o problema de legibilidade de textos heróicos. Acesse o “Página inteira” ver no Codepen, então redimensione a janela do seu navegador tanto na horizontal como na vertical para ver como o texto do herói muda.

Suporte de Navegador

Como você pode ver no gráfico CanIUse abaixo, suporte ao navegador é relativamente bom para unidades de viewport. No entanto, lembre-se de que algumas versões do IE e do Edge não suportam vmax. Além disso, iOS 6 e 7 têm um problema com o vh unidade, que foi corrigido no iOS 8.