Como converter unidades CSS com tamanho-base e viewport

Para que serve o conversor de unidades CSS

Este conversor serve para transformar valores numéricos entre unidades CSS, tendo em conta um tamanho-base e as dimensões da janela de visualização. Pode trabalhar com px, em, rem, %, pt, vw, vh, cm, mm e in, tanto como unidade de origem como de destino. É útil quando precisa de comparar medidas relativas e absolutas ou adaptar um valor a uma base tipográfica e a uma viewport específicas.

Como converter um valor CSS

1. Indique o valor numérico que pretende converter. Se não preencher este campo, é usado o valor 16.
2. Escolha a unidade de origem, como px, em, % ou vw. Quando não indicar uma unidade, é usada px.
3. Escolha a unidade de destino, como rem, px, vh ou cm. Sem uma escolha, o destino é rem.
4. Defina o tamanho-base se a conversão envolver em, rem ou %. O valor predefinido é 16.
5. Para vw e vh, indique a largura e a altura da viewport que devem servir de referência. Os valores predefinidos são 1920 para a largura e 1080 para a altura.
6. Execute a conversão e consulte o valor convertido e o valor intermédio em píxeis. Numa conversão bem-sucedida, ambos são apresentados com quatro casas decimais.

Como ler o resultado e os seus limites

O cálculo passa primeiro pelo equivalente em píxeis e, depois, converte esse valor para a unidade de destino. Por exemplo, com um valor de 16 px, um tamanho-base de 16 e rem como destino, o resultado é 1.0000. Para em e rem, o tamanho-base é a referência; para percentagens, o valor é relacionado com essa base; vw usa a largura da viewport e vh usa a altura.

Os valores absolutos seguem factores específicos: pt, cm, mm e in são convertidos através dos factores de píxeis correspondentes. Se introduzir uma etiqueta de unidade não reconhecida, a unidade de origem é tratada como se o número já estivesse em píxeis e uma unidade de destino não reconhecida mantém o valor em píxeis. Por isso, reveja a grafia das unidades antes de interpretar o resultado.

Um tamanho-base igual a zero produz zero nas conversões para em, rem ou %. Do mesmo modo, uma dimensão de viewport igual a zero produz zero para vw ou vh. Se ocorrer uma exceção durante o cálculo, o resultado é assinalado como malsucedido e inclui o texto da exceção.

Exemplo prático

Uma pessoa precisa de confirmar qual é o equivalente em rem de um espaçamento de 16 px numa folha de estilos com base de 16.

Introduza 16 como valor, selecione px como origem, rem como destino e mantenha o tamanho-base em 16. Execute a conversão.

O resultado bem-sucedido deve apresentar o valor convertido e o valor intermédio em píxeis, ambos com quatro casas decimais; neste caso, o valor convertido é 1.0000.

Limitações

• Unidades não reconhecidas seguem um comportamento de passagem por píxeis, denominadores zero podem produzir zero em destinos relativos e uma exceção gera um resultado malsucedido com o respetivo texto.

Erros comuns

• Causa: escrever uma unidade com uma grafia não reconhecida, como uma etiqueta diferente de px, rem ou vw.

Como corrigir: confirme a unidade de origem e a unidade de destino antes de executar a conversão; uma etiqueta desconhecida pode ser tratada como píxeis em vez de ser rejeitada.

Perguntas frequentes

Posso converter píxeis para rem?

Sim, desde que escolha em ou rem como unidade de destino e defina o tamanho-base aplicável. Sem esse valor, é usada uma base de 16.

Que dimensões devo indicar para vw e vh?

A conversão para vw usa a largura da viewport e a conversão para vh usa a altura. Se a dimensão relevante for zero, o resultado é zero.

O que acontece se eu escrever uma unidade inválida?

Uma etiqueta de origem não reconhecida é tratada como se o valor já estivesse em píxeis; uma etiqueta de destino não reconhecida deixa o valor em píxeis. Verifique a grafia para evitar uma interpretação inesperada.