conversor de unidade css

Um Conversor de Unidade CSS traduz um comprimento entre as unidades que o CSS usa para dimensionar tipo e layout: px, rem, em, pt e %. Ele existe porque o design responsivo moderno se apoia em unidades relativas - escala rem e em com as configurações de tamanho de fonte e zoom do usuário - enquanto maquetes de design e folhas de estilo mais antigas são geralmente expressas em pixels fixos Esta ferramenta pega um valor como 24 px e mostra-o como 1,5 rem, 1,5 em, 18 pt e 150% de uma só vez, e funciona em todas as direções a partir de um único campo.

As conversões todas dependem de um número: o tamanho da fonte raiz (base), que é padrão para 16 px porque esse é o padrão do navegador para o elemento html Um rem sempre é igual a esse tamanho de fonte base, então em 16 px o valor 16 px é 1 rem, 24 px é 1,5 rem, e 8 px é 0,5 rem. Os pontos são vinculados ao pixel de referência CSS - 1 polegada é 96 px e 72 pt - então 1 pt é igual a 96/72, cerca de 1,333 px. Porcentagem é tratada como uma parcela do tamanho da fonte base, então 100% é igual à base e 50% é igual a metade dela.

Cada conversão leva duas etapas A ferramenta primeiro transforma sua entrada em pixels multiplicando-a pelo número de pixels em uma unidade de entrada, depois divide esse valor de pixel pelo número de pixels em uma unidade de destino Em uma base de 18 px, 27 px torna-se 27 18 = 1,5 rem, e em qualquer base 12 pt torna-se 12 × 96 72 = 16 px. Os resultados são arredondados para no máximo quatro casas decimais, então 15 px em uma base de 16 px lê 0,9375 rem. As unidades de visualização de portas, como vw e vh, não fazem parte do conversor, porque dependem do tamanho da janela em vez de uma fonte de tamanho de fonte de base de zero ou menos, voltam a 16 px.

Tudo é executado no seu navegador enquanto você digita, então não há upload e não há espera em um servidor Altere o tamanho da fonte base para modelar um componente que define seu próprio tamanho de fonte, leia os resultados em cada unidade e copie o que você precisa A tabela px-to-rem integrada fornece uma referência pronta para os tamanhos que mais aparecem em uma escala de tipos.