01
Separe raiz, pai e viewport
rem usa a fonte raiz; em usa a fonte do pai informada. vw e vh usam a largura e a altura digitadas, não a janela atual do navegador.
HTML / CSS / código frontend
conversor de unidades CSSValores responsivos com a base à mostra
Digite uma medida ou alterne para clamp, calc e proporção.
conversor de unidades CSS
Entrada
Os valores são calculados neste navegador e não são enviados.
Resultado
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhOpções
Cálculo concluído.
O layout veio com 24px, mas o componente usa rem ou vw? O resultado depende da fonte raiz e do viewport. Este conversor de unidades CSS também separa a fonte do elemento pai para em, evitando tratar todas as unidades relativas como se tivessem a mesma base.
Além de px para rem, a calculadora CSS clamp cria uma escala fluida e a conversão vw vh mostra medidas em pixels. O conversor de unidades CSS reaproveita esses parâmetros ao calcular expressões calc() que estão dentro do escopo.
Por que usar este conversor de unidades CSS?
Cada resposta mostra a referência usada.
Cinco unidades para a mesma medida
O conversor de unidades CSS lista px, rem, em, vw e vh lado a lado. Mudar somente a fonte raiz altera rem; mudar a fonte do pai altera em. O cálculo vale para os parâmetros digitados, sem alegar que leu os estilos de outro site.
clamp() calculado a partir de dois pontos
Defina a largura e o tamanho em duas telas; a inclinação em vw surge desses pontos. Teste 768px para ver o tamanho intermediário e descobrir se o valor continua fluido ou já está limitado.
Revise a base antes de copiar
02
Escolha quando atualizar
No automático, o cálculo espera 350 ms após uma mudança. Desligue para executar com Ctrl/Cmd+Enter; resultados antigos ficam indisponíveis para cópia.
03
Confira um ponto entre as extremidades
No clamp, teste uma largura intermediária além dos dois limites. Na proporção, confira a razão simplificada e a altura obtida para a largura desejada.
Medidas, expressão e proporção no mesmo lugar
Tabela de cinco unidades
Digite px, rem, em, vw ou vh e veja os cinco equivalentes. Um número sem sufixo é interpretado como px.
Gerador de clamp()
Duas larguras e dois tamanhos definem uma reta. Escolha limites em rem ou px e visualize o tamanho em qualquer largura de teste.
Cálculo limitado de calc()
Expressões com cinco unidades, parênteses e operações básicas são avaliadas em px. Multiplicar ou dividir exige um número sem unidade.
Proporção de largura e altura
Simplifique dimensões inteiras, obtenha aspect-ratio em CSS e calcule a altura correspondente a uma largura de destino.
Quando o cálculo precisa de mais contexto
- Unidades relativas exigem referência
- O conversor de unidades CSS não lê o estilo calculado da página de destino. rem, em, vw e vh dependem dos quatro parâmetros preenchidos aqui.
- calc() aceita somente um subconjunto
- %, var(), env(), unidades desconhecidas e operações com dimensões incompatíveis são recusados. Sem o contêiner e a cascata CSS, não existe valor px confiável para esses casos.
- Os pontos de clamp devem estar na ordem
- A largura inicial precisa ser menor que a final, e o tamanho mínimo não pode ultrapassar o máximo. Tamanhos negativos interrompem a geração.
- Proporção não edita imagem
- Largura e altura originais e largura de destino devem ser inteiros positivos. A ferramenta calcula altura e declaração CSS, mas não corta nem redimensiona arquivos.
Dúvidas sobre o conversor de unidades CSS
Como converter px para rem?
Divida os pixels pelo tamanho da fonte raiz. Com raiz de 16px, 24px correspondem a 1,5rem; ajuste o campo se o projeto usar outra base.
Qual é a diferença entre em e rem?
rem depende da raiz do documento, enquanto em usa o tamanho de fonte do pai informado. Componentes aninhados podem ter em diferente sem alterar rem.
Como transformar vw e vh em pixels?
1vw representa 1% da largura do viewport e 1vh, 1% da altura. Informe as duas dimensões e converta por px.
Como calcular clamp() para tipografia fluida?
Indique duas larguras de tela e o tamanho desejado em cada uma. A ferramenta calcula a inclinação em vw e permite visualizar o valor de clamp() no meio.
Por que o valor muda quando altero a fonte raiz?
Porque rem sempre usa a fonte raiz informada. Se ela mudar, o equivalente numérico também muda; use o valor real do seu projeto.
Mais alguma dúvida?
Usar o conversor de unidades CSS
Volte ao painel para comparar medidas, testar uma expressão ou criar um tamanho fluido com limites.