Converter px em vw Pixels ↔ Viewport width Grátis Online Seguro

Por que você converte px em vw

Um designer manda um mockup desenhado com 1440 px de largura, com um título de destaque de 96 px e um vão entre seções de 72 px. Na web de verdade a página será vista a 360 px num celular, 820 px num tablet e 2560 px num monitor grande, e o designer gostaria que o título mantivesse a proporção com a tela em cada um deles. A unidade feita para isso é a largura do viewport, vw, e o caminho do mockup até ela é converter px em vw: você pega o valor em pixels, divide pela largura em que o design foi desenhado e multiplica por cem. Um título de 96 px num canvas de 1440 px são 6,67 vw, e dali em diante é sempre 6,67 por cento da tela, seja qual for.

Essa é a promessa da unidade de viewport, e também o seu risco. O rem e o em partem de um tamanho de fonte, que o navegador define com um padrão sensato. O vw não tem padrão nenhum: a largura do viewport é simplesmente a largura da janela do leitor, e muda quando ele gira o celular ou arrasta a janela. Por isso o conversor não esconde o único número de que a resposta depende. A largura do design fica num campo, começando em 1440 px, e você pode mudá-la para combinar com o seu mockup.

A aritmética roda no seu navegador e nada é enviado. Abaixo você encontra a fórmula, o que a conversão mantém e o que não consegue manter, onde as unidades de viewport ajudam e onde atrapalham, o problema de acessibilidade que o texto em vw puro cria, a técnica do clamp que o resolve e um método para transformar um mockup em pixels numa folha de estilos fluida.

A fórmula e a largura

vw é igual a px dividido pela largura, vezes cem

A fórmula é vw = px ÷ largura × 100. Com uma largura de design de 1440 px, um tamanho de 144 px vira 10 vw, 72 px viram 5 vw e 24 px viram 1,667 vw. A página mostra a largura ao lado do resultado, como em 144 px = 10 vw (1440 px), para que você veja o que foi presumido. Um vw é um centésimo da largura do viewport, então numa janela de 1000 px de largura 1 vw equivale a 10 px.

De onde vem o 1440

Os 1440 px aqui são uma largura em que os designs costumam ser desenhados, um hábito e não um padrão. Algumas equipes desenham em 1280, muitas em 1920, e os designs para celular em 375 ou 390. Não há resposta certa, só a largura que o seu arquivo de design usa. Digite a sua: a conversão é tão boa quanto a largura que você lhe dá.

Usando a largura do próprio design

Se o mockup foi desenhado em 1920 px, digite 1920, e o mesmo título de 96 px vira 5 vw. Se você converte px em vw com a largura errada, a página ficará certa num tamanho de tela e errada em todos os outros, o que é um bug intrigante quando você não sabe onde procurar.

O que a conversão mantém e o que não consegue

Mantém a fração da tela

Um vw é um centésimo da largura do viewport, então um tamanho escrito em vw cresce e encolhe com a janela em vez de ficar parado. O resultado é a fração da tela que o valor em pixels ocupava no seu mockup, e no navegador o elemento mantém essa fração em toda largura.

Não consegue dar um padrão

Ao contrário do rem, o vw não tem padrão. Um navegador dá à raiz o tamanho de fonte de 16 px quando ninguém diz outra coisa, então uma página em rem pode partir de um número real; a largura do viewport é simplesmente a largura da janela do leitor, e muda quando ele gira o celular. A largura do campo é a largura do seu design, e a resposta está certa para uma tela dessa largura e em proporção em todas as outras.

Arredondamento

Dividir por 1440 produz decimais longos para a maioria dos tamanhos. Um valor como 6,6667 vw serve numa folha de estilos, mas você pode arredondar para 6,67 ou 6,7 sem nenhuma mudança visível. Mantenha dois ou três dígitos depois da vírgula; mais que isso é ruído.

Onde as unidades de viewport ajudam

Títulos de destaque e texto grande de exibição

Um título que deve preencher uma dada fração da tela em todo dispositivo é o uso clássico. Na largura de um celular, um título fixo de 96 px transbordaria; em vw ele encolhe com a tela e fica numa só linha.

Seções de largura total

O espaçamento entre grandes seções de uma página de destino muitas vezes fica melhor quando escala com a tela, para que a página mantenha seu ritmo num notebook pequeno e numa tela larga. Vãos em vw fazem isso.

Arte que deve manter a forma

Imagens de destaque, ilustrações e formas decorativas dimensionadas em vw mantêm suas proporções em relação à janela, então a composição não se desfaz conforme a tela muda.

Texto fluido com limites

Combinado com clamp(), o vw dá um texto que cresce suavemente entre um mínimo e um máximo. É a técnica que as folhas de estilos modernas usam para títulos, e é tratada abaixo.

Onde as unidades de viewport atrapalham

Texto do corpo em vw puro

O texto dimensionado só em vw não responde quando o leitor dá zoom na página do navegador, porque o zoom muda o tamanho em pixels da janela, mas um tamanho em vw mantém a sua fração dela. Quem depende do zoom, muitas vezes por causa de visão fraca, fica com texto que não consegue ampliar. As diretrizes de acessibilidade pedem que o texto possa ser redimensionado, e um tamanho em vw puro falha nesse teste.

Extremos minúsculos e enormes

Com 320 px de largura, um título de 6,67 vw tem 21 px, o que pode ser pequeno demais. Com 2560 px de largura tem 171 px, o que é enorme. Sem limites, a proporção que parecia certa em 1440 pode ser absurda nas pontas.

A barra de rolagem

Nos navegadores de computador, a largura do viewport usada para o vw inclui a largura da barra de rolagem vertical. Uma caixa definida como 100vw ficará, portanto, um pouco mais larga que a área visível quando a página rola, e uma barra de rolagem horizontal pode aparecer. Saiba disso antes de construir um layout de largura total com vw.

A técnica do clamp

Definindo um piso e um teto

A função CSS clamp(mín, preferido, máx) recebe um mínimo, um valor preferido e um máximo. Para texto, escreva o mínimo e o máximo em rem e o valor preferido em vw mais um termo em rem: font-size: clamp(2rem, 1rem + 4vw, 6rem). O tamanho cresce com a janela entre 32 e 96 px e nunca passa de nenhuma das pontas. Como parte dele está em rem, o texto ainda respeita as configurações do leitor.

Como montar o termo do meio

Escolha duas larguras de tela e os tamanhos que você quer em cada uma. Por exemplo, 32 px com 360 px de largura e 96 px com 1440 px de largura. A inclinação é (96 − 32) ÷ (1440 − 360) = 0,0593 px por px de largura, que são 5,93 vw, e a interseção é 32 − 0,0593 × 360 = 10,67 px, cerca de 0,667 rem. O termo preferido é, portanto, 0.667rem + 5.93vw. O conversor ajuda com a parte em vw, e um minuto de aritmética faz o resto.

Por que este é o equilíbrio certo

Com o clamp, você obtém o comportamento fluido que os designers querem e a acessibilidade de que os leitores precisam. É a resposta ao problema descrito acima, e a razão de a maioria das folhas de estilos modernas usar o vw só dentro do clamp.

Como converter px em vw aqui

Digite o valor em pixels

Digite o tamanho em pixels no primeiro campo. Decimais são aceitos.

Defina a largura do design

Deixe em 1440 se essa é a largura do seu mockup. Mude se não for. O resultado se atualiza enquanto você digita.

Copie o valor em vw

Use o número no seu CSS com a unidade, como em font-size: 6.67vw. Para texto, ponha-o dentro de clamp() junto com limites em rem.

De onde vêm essas unidades

O pixel do CSS

Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels reais passou a ser uma página que encolhia à medida que as telas ficavam mais nítidas. Então o pixel do CSS foi redefinido como um comprimento de referência: cerca de 1/96 de polegada visto a uma distância confortável de leitura. É a unidade em que o seu mockup é desenhado.

As unidades de viewport

O vw chegou com o design responsivo: um centésimo da largura do viewport, seja ela qual for. Fica ao lado do rem, relativo ao tamanho de fonte da raiz, e do em, relativo ao elemento. Se você precisa de tamanhos relativos ao texto em vez de à tela, converta px em rem.

Armadilhas ao converter px em vw

Usar a largura de design errada

O erro mais comum. Se o seu mockup tem 1920 de largura e você converte com 1440, todo tamanho fica errado em um terço. Confirme a largura do quadro na sua ferramenta de design.

Esquecer o design para celular

Muitas equipes têm dois mockups, um para computador e um para celular. Um título que tem 96 px no primeiro e 40 px no segundo não é um único valor em vw. Use duas larguras, duas conversões e um clamp para uni-las.

Pôr a página inteira em vw

Uma página em que tudo escala com a janela perde o sentido de leitura: as linhas ficam longas demais em telas largas e o texto pequeno demais em telas estreitas. Use vw para as poucas coisas que devem escalar e tamanhos fixos ou em rem para o resto.

Ignorar o problema do zoom

Teste a sua página com o navegador com zoom de 200 por cento. Se o texto não cresce, os tamanhos precisam de um termo em rem.

Perguntas que as pessoas fazem antes de converter

Quantos vw são 100 px?

Com uma largura de design de 1440 px, cerca de 6,94 vw.

Qual é a melhor largura de design a usar?

Aquela em que o seu mockup foi desenhado. Não há padrão universal.

O vw é melhor que o rem?

Fazem trabalhos diferentes. O rem acompanha o tamanho de texto do leitor; o vw acompanha a janela. Use cada um para o que faz bem.

Posso usar vw para o tamanho de fonte?

Sim, mas ponha-o dentro de clamp() com limites em rem, para que o texto continue legível e ainda possa receber zoom.

O meu número é enviado?

Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.

Como volto?

Com vw em px, que multiplica pela largura em vez de dividir.

Escolhendo bem ao converter px em vw

Decida o que deve escalar com a tela

Texto de destaque, grandes vãos e arte: sim. Texto do corpo, bordas, pequenos controles: não. Quanto mais curta a sua lista de valores em vw, mais robusta a página.

Converta na fase de design

Se você converte px em vw enquanto lê o mockup, vê de imediato que valores saem estranhos e pode pedir ao designer outros mais arrumados. Um título que dá 6,6667 vw convida a uma conversa sobre torná-lo 6,5 ou 7.

Guarde um registro da largura

Escreva a largura do design num comentário no topo da folha de estilos, para que quem converter depois use a mesma. Larguras misturadas produzem uma página inconsistente de um jeito que ninguém sabe explicar direito.

Do mockup a uma folha de estilos fluida

Liste os tamanhos que devem escalar

Abra o arquivo de design e anote todo tamanho que você quer que acompanhe a tela: o título de destaque, os vãos entre seções, talvez uma ilustração grande. Para cada um, converta px em vw contra a largura do quadro e anote o resultado. A maioria das páginas termina com menos de dez desses valores, e todo o resto fica em rem ou em pixels.

Confira o quadro de celular à parte

Se há um mockup de celular, leia os mesmos elementos na largura dele. Um título de 96 px num quadro de 1440 px e de 40 px num quadro de 375 px não cabe em nenhum valor único de vw, e esse é o sinal para usar o clamp: o tamanho do celular vira o piso, o do computador o teto, e o termo em vw faz o trabalho no meio. Quando você converte px em vw para cada quadro, os dois números definem a inclinação.

Revise em três larguras

Olhe a página pronta em aproximadamente 360, 820 e 1440 pixels, e uma vez em 2560. Os layouts fluidos são fáceis de acertar na largura do mockup e sutilmente errados em outros lugares, e uma rápida passada por essas larguras encontra a maioria dos problemas antes que um visitante o faça.

Mantenha a unidade fora dos textos longos

As linhas de texto de leitura ficam melhor dimensionadas em rem, e com um comprimento máximo de linha de cerca de 60 a 75 caracteres. Use a unidade de viewport para texto de exibição e espaçamento, e deixe o texto de leitura estável.

Conversores relacionados

A mesma família de ferramentas cobre as conversões vizinhas. Para voltar aos pixels, use vw em px. Para tamanhos relativos à raiz, há px em rem e rem em px, e para tamanhos relativos ao elemento, px em em e em em px. Para as cores da mesma folha de estilos, HEX em RGB e HEX em HSL cuidam das notações.

Um exemplo resolvido

Digamos que uma página de destino seja desenhada em 1440 px, com um título de destaque de 96 px e um vão de 72 px acima dele. Você digita 96 e lê 6,667 vw, digita 72 e lê 5 vw. Numa janela de 1000 px o título tem 66,7 px e o vão 50 px, em proporção. Mas num celular de 360 px de largura o título teria 24 px, que é menos do que você quer, então você escreve o título como clamp(2.25rem, 1rem + 5vw, 6rem), dando um piso de 36 px e um teto de 96 px, e ele continua legível e com zoom possível. O vão, que não tem texto, fica em vw simples.

Uma lista de conferência rápida

Antes de converter

Descubra a largura do mockup. Decida quais tamanhos devem escalar e quais não.

Durante a conversão

Digite o valor em pixels e a largura do design e copie o número em vw com a unidade.

Depois de converter

Redimensione a janela da largura de um celular até um monitor largo e dê zoom de 200 por cento na página. Acrescente limites com clamp() onde os extremos parecerem errados.

Erros comuns

Presumir que 1440 é um padrão

É só um hábito. Use a sua própria largura.

Dimensionar o texto do corpo só em vw

Não pode receber zoom. Acrescente um termo em rem e limites.

Esquecer a barra de rolagem

100vw é mais largo que a área visível nas páginas de computador que rolam.

Seus números ficam no seu dispositivo

O cálculo acontece localmente. Seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois nem conta a criar. Esse é o jeito simples de converter px em vw.

Resumo

Para converter px em vw aqui, digite o tamanho em pixels e a largura do seu design e leia o resultado na hora, usando a fórmula vw = px ÷ largura × 100. A largura começa em 1440 px, uma largura em que os designs costumam ser desenhados, mas é um hábito e não um padrão, então digite a sua. A conversão mantém a fração da tela: um vw é um centésimo da largura do viewport, então um tamanho em vw cresce e encolhe com a janela. Ao contrário do rem, o vw não tem padrão, já que o viewport é a largura da janela do leitor, seja qual for. Para texto, combine vw com rem dentro de clamp(), para que continue legível e com zoom possível. Nada é enviado.