Conversor de Unidades CSS

O Que É a Conversão de Unidades CSS?

Um conversor de unidades CSS é uma ferramenta que traduz valores de comprimento entre diferentes sistemas de medida do CSS. O CSS define mais de uma dúzia de unidades de comprimento, divididas em dois grupos: unidades absolutas como px, pt, cm e in, que mapeiam para medidas físicas fixas, e unidades relativas como rem, em, vw, vh e %, que dependem do contexto, como tamanho de fonte ou dimensões do viewport.

Os navegadores resolvem todos os comprimentos CSS em pixels durante a renderização. Quando você escreve 1.5rem, o navegador multiplica 1.5 pelo font-size raiz (tipicamente 16px) para obter 24px. Quando você escreve 50vw, ele usa metade da largura atual do viewport. Entender essas relações é necessário para construir layouts que escalam em diferentes dispositivos e respeitam preferências do usuário, como tamanhos de fonte personalizados definidos no navegador.

A especificação CSS Values and Units Module Level 4 (W3C) define as taxas de conversão exatas entre todas as unidades absolutas: 1in = 96px = 72pt = 2.54cm = 25.4mm. Unidades relativas não têm proporção fixa porque dependem do contexto em tempo de execução. Um conversor de unidades CSS gratuito permite calcular essas relações instantaneamente com base no seu font-size raiz e dimensões de viewport específicos, sem escrever nenhum código.

Por Que Usar um Conversor de Unidades CSS?

Converter entre unidades CSS manualmente significa lembrar proporções, abrir uma calculadora e verificar sua conta duas vezes. Esta ferramenta faz a conversão no seu navegador sem nenhuma fricção.

Casos de Uso do Conversor de Unidades CSS

Referência de Unidades de Comprimento CSS

O CSS define 10 unidades de comprimento de uso comum. Unidades absolutas têm uma conversão fixa para pixels. Unidades relativas dependem do contexto: o font-size raiz para rem, o font-size do elemento pai para em, e o viewport do navegador para vw e vh.

Unidades CSS Absolutas vs. Relativas

A escolha entre unidades absolutas e relativas afeta como o layout responde a diferentes telas e configurações do usuário. Cada grupo tem suas vantagens e desvantagens.

Tabela de Conversão Comum de px para rem

Esta tabela assume um font-size raiz de 16px (o padrão do navegador). Se o seu projeto usa uma base diferente, divida o valor em pixels pela sua base para obter o equivalente em rem.

Exemplos de Código

Estes exemplos mostram como converter unidades CSS programaticamente em JavaScript, Python, propriedades customizadas CSS e Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Perguntas Frequentes