La conversión de unidades CSS es el proceso de transformar entre diversas unidades de longitud (px, em, rem, %, vw, vh, etc.) usadas en diseño web.
Unidades absolutas y relativas
Las unidades CSS se dividen en absolutas y relativas. Las absolutas (px, pt, cm, etc.) tienen tamaños fijos, mientras que las relativas (em, rem, %, vw, vh, etc.) se expresan como proporciones respecto a un valor base.
px (Píxel)
La unidad más común, representa un punto en la pantalla. Fácil de usar por su tamaño fijo, pero presenta retos de accesibilidad porque ignora las preferencias de tamaño de fuente del usuario.
em (Em)
Unidad relativa basada en el tamaño de fuente del elemento padre. 1em = tamaño de fuente del padre. Se calcula de forma acumulativa en estructuras anidadas, lo que puede provocar tamaños inesperados en jerarquías profundas.
rem (Root Em)
Unidad relativa basada en el tamaño de fuente del elemento raíz (html). 1rem = font-size del html (normalmente 16px). A diferencia de em, no se ve afectada por el anidamiento y se recomienda en CSS moderno.
% (Porcentaje)
Representa una proporción respecto al elemento padre. Para font-size se basa en el font-size del padre; para width, en el ancho del padre. La referencia depende de la propiedad.
vw/vh (Unidades de viewport)
Unidades basadas en el tamaño del viewport. 1vw = 1% del ancho del viewport, 1vh = 1% de la altura. Permiten diseños flexibles que responden al tamaño de pantalla.
pt/pc (Unidades de impresión)
Unidades usadas en impresión. 1pt = 1/72 de pulgada, 1pc = 12pt. Se usan en CSS para impresión y generación de PDF, pero en pantalla es más habitual usar px o rem.
Unidades físicas (cm/mm/in)
Unidades que representan longitud física real. 1in = 2.54cm = 25.4mm = 96px (definición CSS). Se usan cuando se necesita cohesión con materiales impresos, aunque el tamaño físico de la pantalla no está garantizado.
Ventajas de la conversión en tiempo real
Esta herramienta soporta conversión en tiempo real y actualiza los resultados cuando cambian los valores base. Permite verificar rápidamente la apariencia con distintos tamaños de pantalla y ajustes de fuente.