Convertidor de unidades CSS

¿Qué es la conversión de unidades CSS?

Un convertidor de unidades CSS es una herramienta que traduce valores de longitud entre los distintos sistemas de medida de CSS. CSS define más de una docena de unidades de longitud, divididas en dos grupos: unidades absolutas como px, pt, cm e in, que se corresponden con medidas físicas fijas, y unidades relativas como rem, em, vw, vh y %, que dependen del contexto: el tamaño de fuente o las dimensiones del viewport.

Los navegadores convierten todas las longitudes CSS a píxeles durante el renderizado. Cuando escribes 1.5rem, el navegador multiplica 1.5 por el font-size raíz (normalmente 16px) para obtener 24px. Cuando escribes 50vw, toma la mitad del ancho actual del viewport. Entender estas relaciones es necesario para construir maquetaciones que escalen entre dispositivos y respeten las preferencias del usuario, como el tamaño de fuente personalizado configurado en el navegador.

La especificación CSS Values and Units Module Level 4 (W3C) define las ratios de conversión exactas entre todas las unidades absolutas: 1in = 96px = 72pt = 2.54cm = 25.4mm. Las unidades relativas no tienen una ratio fija porque dependen del contexto en tiempo de ejecución. Un convertidor de unidades CSS gratuito te permite calcular estas relaciones al instante dado tu font-size raíz específico y las dimensiones del viewport, sin escribir ningún código.

¿Por qué usar un convertidor de unidades CSS?

Convertir unidades CSS a mano implica recordar ratios, abrir una calculadora y comprobar los resultados. Esta herramienta realiza la conversión en tu navegador sin ninguna fricción.

Casos de uso del convertidor de unidades CSS

Referencia de unidades de longitud CSS

CSS define 10 unidades de longitud de uso habitual. Las unidades absolutas tienen una conversión fija a píxeles. Las unidades relativas dependen del contexto: el font-size raíz para rem, el font-size del elemento padre para em, y el viewport del navegador para vw y vh.

Unidades CSS absolutas vs. relativas

Elegir entre unidades absolutas y relativas afecta a cómo responde tu maquetación ante distintas pantallas y configuraciones del usuario. Cada grupo tiene sus propias ventajas e inconvenientes.

Tabla de conversión de px a rem

Esta tabla asume un font-size raíz de 16px (el valor por defecto del navegador). Si tu proyecto usa una base diferente, divide el valor en píxeles por tu base para obtener el equivalente en rem.

Ejemplos de código

Estos ejemplos muestran cómo convertir unidades CSS de forma programática en JavaScript, Python, propiedades personalizadas CSS y 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
}

Preguntas frecuentes