Conversor de Unidades CSS

Para convertir píxeles a rem, divide el valor en píxeles entre el tamaño de fuente raíz, que los navegadores fijan por defecto en 16px. Así, 24px son 24 / 16 = 1.5rem, 12px son 0.75rem y 32px son 2rem. La razón por la que los desarrolladores pasan de px a rem es la accesibilidad: rem escala con el tamaño de fuente que el visitante haya elegido en su navegador, mientras que los píxeles fijos lo ignoran, de modo que el texto sigue siendo legible para quienes hacen zoom o amplían la fuente. Si tu proyecto usa un tamaño raíz distinto, el cálculo cambia, así que el divisor debe coincidir con el font-size real de tu html. Este conversor lo hace al instante en todas las unidades a la vez, te permite fijar un tamaño de fuente raíz personalizado en lugar de asumir 16px, y señala la clase de Tailwind equivalente (por ejemplo, 16px corresponde a text-base) para que puedas pegarlo directamente en un código basado en clases de utilidad.

Ambas son unidades relativas de tamaño de fuente, pero se miden contra referencias distintas. Un rem siempre es relativo al tamaño de fuente del elemento raíz, así que 1rem equivale al mismo valor en píxeles en cualquier punto de la página, sin importar el anidamiento. Un em es relativo al tamaño de fuente del elemento actual, lo que hace que se acumule: si un elemento padre mide 1.2em y un hijo dentro de él también mide 1.2em, el hijo se renderiza a aproximadamente 1.44 veces el tamaño base, y un anidamiento más profundo multiplica aún más el resultado. Esa acumulación hace que em sea útil para escalados locales de un componente, como un padding que sigue el tamaño de su propio texto, pero puede dar sorpresas en árboles muy anidados, donde rem se mantiene predecible. Esta herramienta te permite fijar por separado el tamaño de fuente raíz y el del elemento padre, para que veas exactamente cómo se resuelve un valor en em frente a uno en rem en tu contexto de anidamiento concreto.

CSS utiliza un estándar de referencia fijo en lugar del tamaño físico real de tu monitor, por lo que las unidades absolutas se definen entre sí. Según ese estándar, 1 pulgada equivale a 96px y 72pt, lo que hace que 1pt sea aproximadamente 1.333px y que 1pc (pica) sea exactamente 16px, ya que 1pc son 12pt. En cuanto a las unidades métricas, 1cm equivale a unos 37.8px (96 dividido entre 2.54) y 1mm a unos 3.78px. Estas conversiones son más relevantes en hojas de estilo para impresión, donde los puntos y las unidades físicas se corresponden realmente con el papel, mientras que en pantalla una pulgada es una abstracción de CSS y no una pulgada medida. En lugar de memorizar estos factores o hacer el cálculo a mano, pega cualquier valor en este conversor y obtendrás el equivalente en px, pt, pc, cm, mm e in simultáneamente, con copiado en un solo clic.

Ambas son unidades de viewport equivalentes al 1% de una dimensión del viewport, pero cada una toma una dimensión distinta. vmin es el 1% del lado más pequeño del viewport, mientras que vmax es el 1% del lado más grande. En un teléfono en vertical, donde el ancho es el lado más pequeño, 10vmin sigue el ancho y 10vmax sigue el alto; al girarlo a horizontal, ambos se intercambian, porque cambia cuál es el lado más pequeño. Esto hace que vmin sea útil para elementos que deben permanecer totalmente visibles en ambas orientaciones, como un cuadrado que nunca debe desbordarse, y que vmax resulte práctico cuando quieres que algo escale con la dimensión dominante. En cambio, vw y vh están fijadas específicamente al ancho y al alto respectivamente. Este conversor te permite introducir tu propio ancho y alto de viewport, y luego muestra cómo se resuelve un valor en vw, vh, vmin y vmax para esa pantalla exacta.

La función clamp() toma tres valores, un mínimo, un preferido y un máximo, escritos como clamp(min, preferido, max). El navegador usa el valor preferido, pero nunca deja que baje del mínimo ni suba del máximo. Para una tipografía fluida, el valor preferido combina una base en rem con un término en vw, de modo que el tamaño crece linealmente con el ancho del viewport entre dos breakpoints, y luego se fija en el mínimo en pantallas pequeñas y en el máximo en pantallas grandes. Esto evita que el texto salte bruscamente en cada breakpoint de media query y, en su lugar, escala de forma continua. Calcular a mano la pendiente y la intersección resulta tedioso, así que el generador de clamp de esta herramienta lo hace por ti: introduce un tamaño mínimo y máximo más el rango de viewport en el que quieres que ocurra el escalado, elige salida en rem o px, y copia el valor clamp() final directamente en tu hoja de estilos.