Conversor de unidades CSS

O que é Conversor de unidades CSS?

O Conversor de Unidades CSS é uma ferramenta gratuita que funciona no navegador e traduz um único comprimento CSS para sete unidades comuns: px, rem, em, pt, %, vw e vh. Desenvolvedores front-end e designers web o utilizam para mover um layout entre pixels absolutos e unidades responsivas, para verificar a quantos pixels um rem corresponde com um tamanho de fonte raiz personalizado, ou para converter um valor em pt de estilo de impressão para pixels de tela. Como rem depende do tamanho da fonte raiz, em e % dependem do tamanho da fonte do pai, e vw/vh dependem do viewport, o conversor expõe os quatro como configurações ajustáveis. Digite um valor, escolha sua unidade de origem e todos os campos de resultado são atualizados ao mesmo tempo. Um trecho de CSS pronto para colar lista os sete equivalentes como declarações font-size.

Como usar Conversor de unidades CSS

1. Abra as Configurações e defina o tamanho da fonte raiz (o font-size do html no qual o rem se baseia), o tamanho da fonte do pai (para em e %) e a largura e altura do viewport (para vw e vh).
2. Digite o número que você quer converter no campo de valor.
3. Escolha a unidade de origem no menu suspenso De: px, rem, em, pt, %, vw ou vh.
4. Leia cada equivalente nos campos de resultado rotulados e somente leitura; todos são recalculados automaticamente ao alterar o valor, a unidade ou qualquer configuração.
5. Copie o trecho de CSS gerado para colar os sete equivalentes font-size diretamente na sua folha de estilos.

Exemplos

Raiz 16px, valor 16, De px

rem = 1

Raiz 10px, valor 2, De rem

px = 20

valor 16, De px

pt = 12

Perguntas frequentes

Entre quais unidades ele converte?

Sete unidades de comprimento CSS: px, rem, em, pt, %, vw e vh. Qualquer uma delas pode ser a origem, e os sete equivalentes são mostrados ao mesmo tempo.

Por que tenho que definir os tamanhos raiz, do pai e do viewport?

Essas unidades são relativas. rem é um múltiplo do tamanho da fonte raiz (html), em e % são relativas ao tamanho da fonte do pai, e vw/vh são porcentagens da largura e altura do viewport. Defini-las nas Configurações informa ao conversor a que cada unidade relativa corresponde.

Como o pt é tratado?

O CSS define 96px = 1in = 72pt, então 1pt equivale a 4/3 px e 1px equivale a 0,75pt. O conversor usa essa proporção fixa, independente do tamanho da fonte ou do viewport.

O que acontece se um valor ou configuração for inválido?

Se o valor não for um número finito, ou se algum dos tamanhos raiz, do pai ou do viewport estiver ausente, for zero ou negativo, os campos de resultado mostram um traço (—) até que você forneça números válidos.

Algo é enviado para um servidor?

Não. Todas as conversões são executadas inteiramente no lado do cliente, no seu navegador, sem upload e sem chamadas ao servidor, então os valores que você insere nunca saem do seu dispositivo.