Conversor de unidades CSS

Qué hace el Conversor de unidades CSS

El Conversor de unidades CSS traduce valores entre px, rem, em y pt con tamaños base configurables. Es útil al llevar un token de diseño a CSS, revisar escalas tipográficas, convertir una hoja de estilos antigua, comparar valores en puntos orientados a la impresión o decidir si un componente debe usar tamaños relativos a la raíz o al elemento. Introduce un valor de origen, elige su unidad, define los tamaños de fuente de la raíz y del elemento y los valores equivalentes se actualizan al instante. El conversor trata rem como relativo al tamaño de fuente de la raíz y em como relativo al tamaño de fuente del elemento actual.

La conversión entre píxeles y puntos usa la relación de CSS por la que un punto equivale a un píxel y un tercio, de modo que un píxel son 0,75 puntos. Ver todos los equivalentes a la vez facilita comprobar si un token de espaciado o de tamaño de fuente es coherente con el resto de una escala. El botón de copiar crea un resumen compacto de varias líneas para notas, pull requests o revisiones de tokens.

Flujo de trabajo privado en el navegador

Todo el procesamiento ocurre dentro de tu navegador con JavaScript del lado del cliente. La herramienta no sube fragmentos, valores de configuración, datos generados, texto de consultas ni ejemplos copiados a ningún servidor, y no requiere cuenta. Este modelo solo local importa en las utilidades para desarrolladores, porque lo que se pega en ellas suele parecerse a datos reales de aplicaciones: respuestas de API, registros, ejemplos con forma de variables de entorno, consultas de bases de datos, marcado de borradores o valores copiados de sesiones de depuración en producción. Mantener la transformación en local reduce el riesgo y hace que la interacción sea rápida, porque no hay ida y vuelta por la red.

La interfaz es deliberadamente compacta para que puedas pegar la entrada, ajustar opciones, inspeccionar la salida, copiarla y volver a tu editor. Aun así, conviene revisar los resultados antes de confirmarlos en el repositorio, compartirlos públicamente o usarlos en un flujo de producción. Las herramientas del navegador son excelentes para inspeccionar y preparar con rapidez, pero no pueden conocer todas las convenciones de un proyecto, reglas de clasificación de datos o requisitos de validación propios de una aplicación.

Consejos prácticos

Usa rem para los valores que deban seguir la raíz del documento, como tamaños de fuente accesibles y espaciados de diseño ligados a las preferencias del usuario. Usa em cuando un valor deba escalar con el tamaño de fuente del propio componente, por ejemplo en la alineación de iconos, el relleno local o la tipografía anidada. Usa px con cuidado para bordes exactos, recursos de mapa de bits y casos en los que no se desea una escala relativa. Los tamaños calculados reales pueden verse afectados por los ajustes del navegador, la herencia, el zoom, las media queries y los estilos propios del contenedor, así que verifica los valores importantes en las herramientas de desarrollo.