Conversor de unidades CSS

Ele ajuda quando uma especificação de design, folha de estilos, documento ou biblioteca de componentes adota uma unidade diferente da exigida pelo projeto. Informe o valor, selecione as unidades de origem e destino e defina a referência tipográfica em pixels. O conversor aplica as proporções CSS padronizadas e retorna um número claro e um valor CSS pronto para copiar.

Escolha origem, destino e referência com cuidado

Primeiro, informe a parte numérica do comprimento CSS sem a unidade e selecione a unidade de origem correspondente. Escolha px, em, rem ou pt como destino e forneça um tamanho de fonte base positivo em pixels. A base controla toda conversão que entra ou sai de em ou rem. Por exemplo, com uma base de 16 pixels, 2rem correspondem a 32px, enquanto 24px correspondem a 1.5em. No CSS real, em geralmente se refere ao tamanho de fonte calculado do elemento relevante ou do pai, enquanto rem se refere ao elemento raiz. Como a ferramenta tem um único campo de base, informe a referência apropriada: o tamanho local para em e o tamanho raiz para rem. Conversões apenas entre px e pt não dependem matematicamente dessa referência, mas o campo continua obrigatório para manter um contrato uniforme e explícito. Isso também evita presumir que todo site utiliza uma raiz de 16px.

Entenda o caminho da conversão e o arredondamento

O conversor normaliza o valor de origem em pixels CSS e depois transforma esses pixels na unidade de destino. Unidades relativas usam a base informada: um valor em ou rem é multiplicado pela base para gerar pixels, e um valor em pixels é dividido por ela para gerar em ou rem. Os pontos seguem a relação CSS padrão de 96 pixels por polegada e 72 pontos por polegada; portanto, 1pt equivale a 96 dividido por 72 pixels CSS. Encaminhar todos os pares aceitos por pixels torna previsíveis até conversões de pt para rem e de em para pt. Você pode definir de zero a doze casas decimais. O arredondamento ocorre apenas no final, evitando o acúmulo de erros intermediários. A resposta inclui unidades normalizadas, base, número arredondado e uma string como 1.5rem. Se origem e destino forem iguais, o valor validado é devolvido com o arredondamento solicitado. Números não finitos e bases iguais ou inferiores a zero são rejeitados.

Use os valores sem perder a intenção do design

Um número correto é apenas parte de uma boa migração CSS. Antes de substituir unidades em uma folha de estilos, determine se a medida original deveria acompanhar a tipografia. Pixels e pontos são medidas CSS essencialmente absolutas, enquanto em e rem participam do dimensionamento relativo à fonte. Converter uma borda fixa de px para rem altera seu comportamento quando o usuário ou um tema muda a fonte raiz; isso pode ajudar no espaçamento, mas surpreender em linhas finas. Teste as declarações nos menores e maiores tamanhos de fonte aceitos pela interface, sobretudo em altura de linha, controles e layouts responsivos. Em sistemas de design, registre a base usada em cada lote para permitir reprodução futura. A API é determinística e não depende de rede, aleatoriedade ou relógio, sendo adequada para scripts de build, geradores e testes repetíveis. Unidades incompatíveis, como porcentagens, unidades de viewport, centímetros ou expressões mistas, são rejeitadas em vez de estimadas. Em calc(), converta separadamente cada termo compatível e preserve a estrutura.