Converter vw em px Viewport width ↔ Pixels Grátis Online Seguro
Escreva um valor em vw e leia-o de imediato em px. A conta faz-se no seu navegador, nada é enviado para lugar nenhum, e aquilo de que o resultado depende está escrito mais abaixo em vez de ser presumido.
Nada é enviado
Tamanhos habituais — Converter vw em px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
De onde vêm estas unidades
O pixel do CSS não é o pixel do seu tela. Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels verdadeiros tornou-se uma página que encolhia à medida que as telas ficavam mais finos; redefiniu-se então o pixel CSS como um comprimento de referência: cerca de 1/96 de polegada, visto a uma distância cómoda de leitura. Todo o resto desta página assenta nisso. O em é mais velho do que a web — nos tipos de chumbo era a largura de um bloco fundido, chamado assim por causa do M maiúsculo — e em CSS significa o tamanho de letra em vigor, razão pela qual muda ao aninhar elementos. O rem foi acrescentado precisamente para escapar a isso: é o em do elemento raiz e nunca se compõe. O vw chegou com o desenho adaptativo: um centésimo da largura da janela, seja ela qual for.
Onde as encontra
Estas são as unidades de qualquer planilha de estilo. Os pixels dimensionam contornos, sombras e tudo o que não deve escalar; o rem dimensiona a gráfica, os espaçamentos e a disposição, de modo que uma única alteração na raiz redimensiona uma interface inteira; o em dimensiona o que deve seguir o seu próprio texto, como o enchimento de um botão; o vw dimensiona títulos e cabeçalhos que têm de preencher o tela em qualquer aparelho. Converter entre eles é a aritmética diária de transformar uma maquete entregue em pixels numa planilha de estilo que escala.
Perguntas frequentes
Porque é 16 px o ponto de partida habitual?
Porque é o tamanho de texto por padrão em todos os navegadores importantes, e uma planilha de estilo que não o substitui herda-o. Um rem equivale portanto a 16 px na definição por padrão, e daí vêm as conversões familiares: 0,5 rem são 8 px, 1,5 rem são 24 px. Se um usuário aumentou esse valor nas definições do navegador, esses mesmos valores em rem crescem com ele — que é precisamente para isso que servem.
Devo usar rem ou em?
Rem para tudo o que deva seguir a página no seu todo — escala tipográfica, espaçamentos, larguras de disposição — porque se mede a partir da raiz e nunca se acumula. Em para tudo o que deva seguir o texto em que se encontra: o enchimento de um botão, o espaço junto a um ícone, o avanço de uma citação. O erro comum é aninhar elementos dimensionados em em: 1,2 em dentro de 1,2 em torna-se 1,44, depois 1,73, até o texto no fundo da página ter o dobro do tamanho pretendido.
O resultado é exato?
Onde as duas unidades se definem uma pela outra com números inteiros, sim — a página informa isso acima do número, e o único arredondamento está em quantos dígitos se mostram. Onde a razão não tem decimal finita, a página mostra doze algarismos significativos e diz que a relação é aproximada, em vez de fingir o contrário.
Alguma coisa que escrevo sai do meu aparelho?
Não. A aritmética roda no seu navegador; nada é enviado, e nem sequer há servidor para o receber. Carregada uma vez, a página continua funcionando com a rede desligada.
Por que você converte vw em px
Uma folha de estilo diz font-size: 5.2vw num título principal, margin-top: 8vw numa seção e width: 42vw numa imagem. São valores flexíveis, e não dizem o que está na tela. Quão grande é o título num celular? Quão larga é a imagem num notebook? A margem parece certa a 1920 pixels? Para descobrir você converte vw em px: multiplica o número pela largura da janela e divide por cem, e lê a resposta na unidade que designers, testadores e clientes usam. É o que você faz ao revisar código fluido, conferir uma construção contra um modelo ou explicar a um colega por que o título parece pequeno numa tela estreita.
O que torna esta conversão diferente de rem ou em é que o multiplicador é a própria janela. Um vw é um centésimo da largura do viewport, então 5,2vw são 52 px numa janela de 1000 px de largura, 18,7 px num celular de 360 px de largura e 99,8 px num monitor largo de 1920. Não há um padrão a que recorrer, e a largura muda quando o leitor gira o celular ou arrasta a janela. O conversor, portanto, pede a largura, mostra-a ao lado da resposta e começa em 1440 px, uma largura em que os designs costumam ser desenhados.
O cálculo acontece 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, como ler uma folha de estilo fluida em várias larguras, a armadilha da barra de rolagem, o problema de acessibilidade do texto só em vw e alguns hábitos que mantêm o código fluido compreensível.
A fórmula e a largura
px é igual a vw multiplicado pela largura, dividido por cem
A fórmula é px = vw × largura ÷ 100. A uma largura de 1440 px, 10 vw viram 144 px, 5 vw viram 72 px e 1,667 vw viram 24 px. A página imprime a largura ao lado do resultado, então uma linha como 10 vw = 144 px (1440 px) diz o que foi suposto. Para ver outra tela, mude a largura e leia o resultado de novo.
Quais larguras experimentar
Um conjunto útil para conferir é 360 ou 390 para celulares, 768 para um tablet em pé, 1024 para um notebook pequeno, 1440 para um notebook ou desktop típico e 1920 para um monitor full HD. Digite cada uma no campo de largura e anote o resultado. Cinco leituras mostram toda a faixa de um valor, e qualquer extremo salta aos olhos.
Usando a largura da janela real
Nas ferramentas de desenvolvedor do seu navegador, a barra de dispositivos mostra a largura da janela em pixels. Use esse número para comparar o que a página faz com o que o conversor diz. Se concordam, a sua leitura da folha de estilo está certa.
O que a conversão mantém e o que não consegue
Mantém a parcela 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 valor em pixels que você obtém é essa parcela tornada concreta para uma largura específica.
Não consegue dar um padrão
Ao contrário do rem, o vw não tem padrão. Um navegador dá à fonte raiz 16 px quando ninguém diz o contrário, então uma página em rem pode partir de um número real; a largura do viewport é simplesmente a que a janela do leitor tiver, e muda quando ele vira o celular. Os 1440 px daqui são uma largura em que os designs costumam ser desenhados, um hábito e não um padrão. Digite a sua.
Arredondamento
Multiplicar pela largura e dividir por 100 pode produzir decimais. 6,67 vw a 1440 px são 96,048 px. Os navegadores lidam com pixels fracionários, mas se você precisa de um número inteiro para um arquivo de design, arredonde e anote que o arredondamento é seu.
Lendo uma folha de estilo fluida
Tome três larguras e escreva os resultados
Escolha uma largura estreita, uma média e uma larga, por exemplo 375, 1024 e 1920. Para cada valor vw importante da folha de estilo, converta vw em px em cada largura e escreva os três números numa nota. Um título de 5,2 vw dá 19,5, 53,2 e 99,8 pixels. Visto assim, você sabe se o título é legível na ponta estreita e não esmagador na ponta larga.
Procure o clamp
O código fluido bem escrito põe limites em volta do vw com clamp(min, preferido, max). Se você vê clamp(2rem, 1rem + 4vw, 6rem), o tamanho cresce entre 32 e 96 px e se mantém nas duas pontas. Quando você converte a parte vw, lembre que é só o meio da faixa, e os limites decidem o que acontece nas bordas.
Confira os extremos
As larguras de risco são a menor e a maior. A 320 px um título de 6 vw são 19 px; a 2560 são 154 px. Se nenhum dos dois parece aceitável e não há clamp, a folha de estilo precisa de limites.
Armadilhas ao converter vw em px
A barra de rolagem
Nos navegadores de desktop, a largura do viewport usada para o vw inclui a largura da barra de rolagem vertical. Então 100vw é um pouco mais largo que a área visível quando a página rola, em cerca de 15 a 17 pixels em muitos sistemas. O valor em pixels que você calcula é, portanto, ligeiramente maior que a largura visível que parece representar. Nos celulares, onde as barras de rolagem se sobrepõem à página, o efeito não existe.
Usar a largura errada
O resultado só é tão certo quanto a largura que você digita. Se a sua janela de teste tem 1366 px de largura e você converte a 1440, cada valor fica errado em cerca de cinco por cento. Leia a largura real nas ferramentas de desenvolvedor.
Confundir vw com porcentagem
Uma largura de 50% se refere à largura do elemento pai, enquanto 50vw se refere à janela. Dentro de um contêiner estreito os dois são muito diferentes. O conversor dá a resposta em vw; se o seu elemento está dentro de um contêiner, o pai pode ser mais estreito que a janela.
Esquecer que o texto em vw não pode ser ampliado
O texto dimensionado só em vw não responde quando o leitor amplia a página, porque a janela e o texto escalam juntos. As diretrizes de acessibilidade pedem que o texto possa ser redimensionado. Acrescente um termo em rem, como no clamp(), para que o texto responda também à ampliação.
Perguntas que as pessoas fazem antes de converter
Quantos pixels é 1 vw?
Um centésimo da largura da janela: 14,4 px a 1440, 10 px a 1000, 3,6 px a 360.
Quantos pixels é 50 vw?
Metade da janela: 720 px a 1440 de largura, 500 px a 1000 de largura.
Por que a minha página é mais larga que a tela?
Uma caixa de 100vw numa página que rola é mais larga que a área visível porque a barra de rolagem é contada. Use 100% dentro de um contêiner.
O vw é o mesmo que a porcentagem?
Não. A porcentagem se refere ao pai, o vw à janela.
O meu número é enviado?
Não. A aritmética roda no seu navegador e nada é enviado a lugar algum.
Como volto?
Com px para vw, que divide pela largura em vez de multiplicar.
Valores comuns em larguras comuns
Uma tabela mental
Ajuda conhecer algumas âncoras para poder estimar antes de usar o conversor. A uma largura de 1000 px, 1 vw são 10 px, o que torna a aritmética trivial: 2,5 vw são 25 px, 8 vw são 80 px. A 1440 px, 1 vw são 14,4 px. A 375 px, 1 vw são 3,75 px, então um título de 8 vw são 30 px. Quando você converte vw em px para uma conferência rápida, parta de uma dessas âncoras e escale.
Três larguras, uma folha de estilo
Tome um cartão com largura de 80vw, um espaçamento de 4vw e um título de 6vw. Num celular de 375 px dão 300 px, 15 px e 22,5 px. Num tablet de 768 px, 614 px, 30,7 px e 46 px. Num desktop de 1440 px, 1152 px, 57,6 px e 86,4 px. Ver os três lado a lado diz de imediato que o cartão é largo demais no desktop e o título grande demais, e que você provavelmente quer uma largura máxima e um clamp.
Além do viewport
Unidades de contêiner
O CSS mais novo oferece unidades relativas a um contêiner em vez da janela, como o cqw, que é um centésimo da largura do contêiner. Resolvem o problema de que um componente colocado numa barra lateral estreita se comporta como se tivesse a janela inteira. Se você as usa, a aritmética é a mesma do vw, com a largura do contêiner como base, e você pode usar este conversor digitando essa largura.
Viewports pequeno, grande e dinâmico
Nos celulares, a área visível muda quando a barra de endereço some deslizando. Para as alturas, as unidades mais novas svh, lvh e dvh descrevem o viewport pequeno, grande e dinâmico. Para as larguras a situação é mais simples, já que a barra de endereço não as afeta, e o vw é estável. É mais uma razão pela qual o vw é uma unidade mais segura que o vh para design fluido em dispositivos móveis.
Porcentagem, vw e a grade
As larguras em porcentagem seguem o pai, o vw segue a janela, e o grid e o flexbox do CSS seguem o espaço disponível. Muitas vezes os melhores layouts fluidos usam grid e porcentagens para a estrutura e vw só para tipografia e espaçamento, porque são as coisas que se beneficiam de seguir a tela diretamente. Quando você converte vw em px para conferir um layout, pergunte se uma trilha de grid teria dito a mesma coisa de modo mais robusto.
Explicando o vw a quem não escreve CSS
Use a janela como régua
Os clientes e colegas costumam entender a ideia quando você diz que um vw é um por cento da largura da tela. Um título de 5 vw tem cinco por cento da tela de largura. Depois mostre a eles dois números: quanto dá no celular deles e no grande monitor da sala de reuniões. Quando você converte vw em px para as duas larguras e diz os resultados em voz alta, a ideia de um tamanho que se move com a tela se torna concreta.
Diga por que o design não é fixo
Os interessados não técnicos às vezes perguntam por que a página não tem simplesmente um só tamanho para o título. A resposta é que as telas diferem por um fator de sete ou oito entre o menor celular e o maior monitor, e um tamanho fixo que serve a uma é errado para a outra. As unidades fluidas são a resposta, e os valores em pixels desta página mostram quanto a tela muda o mesmo valor.
De onde vêm essas unidades
O pixel CSS
Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels reais virou uma página que encolhia à medida que as telas ficavam mais nítidas. Então o pixel 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 esta página dá as suas respostas.
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 da fonte raiz, e do em, relativo ao elemento. Para ver como o mesmo valor em pixels fica nessas unidades, converta rem em px e compare.
Hábitos que mantêm o código fluido compreensível
Comente os valores em pixels
Uma linha como font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px a 360, 96px a 1440 */ custa algumas palavras e poupa ao próximo leitor várias conversões.
Mantenha a largura do design num só lugar
Se o seu projeto tem uma propriedade personalizada para a largura em que o design foi desenhado, todo valor vw pode ser rastreado até ela. Quando você converte vw em px para uma revisão, sabe qual largura usar.
Use o vw com moderação
Uma lista curta de valores vw é fácil de raciocinar. Uma folha de estilo em que tudo está em vw não é. Guarde-o para tipografia de destaque, grandes espaçamentos e ilustrações.
Teste em dispositivos reais quando importa
As ferramentas do navegador simulam bem as larguras, mas um celular real mostra o comportamento verdadeiro das barras de endereço, da rotação e da ampliação. Uma conferência de cinco minutos num dispositivo pega o que uma simulação perde.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar a vw, use px para vw. Para tamanhos relativos à raiz, há px para rem e rem para px, e para tamanhos relativos ao elemento, px para em e em para px. Para as cores da mesma folha de estilo, HEX para RGB e RGB para HEX tratam das notações.
Um exemplo prático
Digamos que um testador relata que o título principal é difícil de ler num celular pequeno. A folha de estilo diz font-size: 5.2vw sem limites. Você converte vw em px a 360 e lê 18,7 px, a 768 lê 39,9 px, a 1440 lê 74,9 px. Na ponta estreita o título é um pouco maior que o texto do corpo e já não se lê como título. Você sugere clamp(2rem, 1rem + 4vw, 5rem), que dá 32 px no mais estreito, cerca de 51 px a 768 e 5rem, 80 px, no mais largo. O testador confirma que agora se lê bem, e o título ainda escala.
Uma lista de conferência curta
Antes de converter
Escolha as larguras que lhe importam, das ferramentas de desenvolvedor ou da sua lista de dispositivos-alvo.
Durante a conversão
Digite o valor vw e cada largura em sequência, e anote os pixels mostrados ao lado da base.
Depois de converter
Olhe os extremos. Se um tamanho é pequeno ou grande demais em qualquer ponta, acrescente limites com clamp().
Erros comuns
Supor uma única resposta
Um valor vw tem um tamanho em pixels diferente em cada largura. Dê a largura com cada valor.
Esquecer a barra de rolagem
O 100vw a inclui, então uma caixa de largura total pode transbordar.
Dimensionar o texto do corpo só em vw
Não pode ser ampliado. Acrescente um termo em rem e limites.
Os seus números ficam no seu dispositivo
O cálculo acontece localmente. Os seus valores são usados pelo seu próprio navegador e nada é enviado a lugar algum. Não há nada a apagar depois e nenhuma conta a criar. Esse é o jeito simples de converter vw em px.
Resumo
Para converter vw em px aqui, digite o tamanho em vw e a largura da janela, e leia o resultado em pixels na hora, usando a fórmula px = vw × 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 parcela 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 que a janela do leitor tiver. Para texto, combine vw com rem dentro do clamp(), para que continue legível e ampliável. Nada é enviado.