Convierte entre unidades CSS: px, rem, em, vw, vh, pt, cm y más
Un conversor de unidades CSS traduce un tamaño entre las unidades que CSS usa para el layout — px, rem, em, vw, vh, pt, cm y más — para que muevas un valor limpiamente de una unidad a otra. CSS ofrece muchas unidades porque responden a necesidades distintas: los píxeles son fijos y absolutos, rem y em son relativos a tamaños de fuente para tipografía escalable, y vw y vh son relativos al viewport para layouts responsive. Convertir entre ellas te permite expresar el mismo tamaño en la unidad que deba usar cada regla concreta.
Las conversiones que más importan son las relativas, porque dependen del contexto: un rem son múltiplos del tamaño de fuente raíz (comúnmente 16px), un em es relativo al tamaño de fuente del propio elemento, y las unidades de viewport son porcentajes de la ventana. Esa dependencia es justo lo que hace propenso a errores convertir a mano — 1,5rem solo son 24px si la raíz es 16px. Esta herramienta gestiona los tamaños base por ti para que obtengas valores precisos, ayudándote a construir estilos escalables y responsive en vez de fijar píxeles por todas partes. Se ejecuta en tu navegador.
Un píxel (px) es una unidad fija y absoluta. Un rem es relativo al tamaño de fuente del elemento raíz, así que escala de forma consistente en toda la página. Un em es relativo al tamaño de fuente del elemento actual, así que puede acumularse al anidar. Normalmente se prefiere rem para un dimensionado predecible y escalable.
Depende del tamaño de fuente raíz. Por defecto los navegadores usan 16px, así que 1rem equivale a 16px y 1,5rem a 24px — pero si se cambia el tamaño de fuente raíz, cada valor rem cambia con él. Esa dependencia de la base es por lo que este conversor pide o asume un tamaño raíz.
Las unidades de viewport (vw, vh) son porcentajes del ancho y alto de la ventana, así que son ideales para elementos que deban escalar con la pantalla — secciones a altura completa, texto destacado fluido o espaciado responsive. Cambian al redimensionar el viewport, a diferencia de los valores px fijos.
Las unidades relativas como rem respetan las preferencias de tamaño de fuente del usuario y escalan con elegancia entre dispositivos, lo que mejora la accesibilidad y la respuesta. Fijar píxeles por todas partes ignora esos ajustes y hace los layouts rígidos, por eso convertir a unidades relativas suele merecer la pena.
Generador de sombra de caja CSS · Generador de radio de borde CSS · Generador de Flexbox · Generador de CSS Grid · Generador de sombra de texto CSS · Generador de animaciones CSS