Conversor de unidades CSS

Resulta útil cuando una especificación de diseño, hoja de estilos, documento o biblioteca de componentes utiliza una unidad distinta de la requerida por su proyecto. Introduzca el valor, elija las unidades de origen y destino y defina la referencia tipográfica en píxeles. El conversor aplica las proporciones estándar de CSS y devuelve un número claro junto con un valor CSS listo para copiar.

Elija con cuidado el origen, el destino y la referencia

Introduzca primero la parte numérica de la longitud CSS sin la unidad y seleccione después la unidad de origen correspondiente. Elija px, em, rem o pt como destino e indique un tamaño de fuente base positivo en píxeles. La base controla toda conversión desde o hacia em o rem. Por ejemplo, con una base de 16 píxeles, 2rem equivalen a 32px y 24px equivalen a 1.5em. En CSS real, em suele depender del tamaño de fuente calculado del elemento pertinente o de su padre, mientras que rem depende del elemento raíz. Como esta herramienta ofrece un único campo base, use la referencia apropiada: el tamaño local para em y el tamaño raíz para rem. Aunque las conversiones exclusivamente entre px y pt no dependen matemáticamente de esa referencia, el campo sigue siendo obligatorio para mantener un contrato explícito y uniforme. Así se evita suponer por error que todos los sitios utilizan una raíz de 16px.

Comprenda el proceso de conversión y el redondeo

El conversor normaliza primero el valor de origen a píxeles CSS y después transforma esos píxeles a la unidad de destino. Las unidades relativas emplean la base indicada: un valor em o rem se multiplica por la base para obtener píxeles, y un valor en píxeles se divide por ella para obtener em o rem. Los puntos siguen la relación estándar de CSS de 96 píxeles por pulgada y 72 puntos por pulgada; por ello, 1pt equivale a 96 dividido entre 72 píxeles CSS. Pasar todos los pares admitidos por píxeles hace previsibles incluso las conversiones de pt a rem o de em a pt. Puede fijar entre cero y doce decimales. El redondeo solo se aplica al terminar, por lo que no se acumulan errores intermedios. La respuesta incluye unidades normalizadas, base, número redondeado y una cadena como 1.5rem. Si ambas unidades coinciden, devuelve el mismo valor validado y redondeado. Se rechazan los números no finitos y las bases iguales o inferiores a cero.

Use los valores sin perder la intención del diseño

Obtener un número correcto es solo una parte de una buena migración CSS. Antes de sustituir unidades en una hoja de estilos, determine si la medida original debía escalar con la tipografía. Los píxeles y puntos son medidas CSS esencialmente absolutas, mientras que em y rem responden al tamaño de fuente. Convertir un borde fijo de px a rem cambia su comportamiento cuando el usuario o un tema modifica la raíz; puede ser conveniente para el espaciado, pero sorprendente en líneas finas. Pruebe las declaraciones con los tamaños de fuente mínimo y máximo de la interfaz, en especial alturas de línea, controles y diseños adaptables. En un sistema de diseño, registre la base utilizada para poder reproducir cada lote. La API es determinista y no depende de red, azar ni reloj, por lo que sirve para scripts de compilación, generadores y pruebas repetibles. Las unidades no admitidas, como porcentajes, unidades de ventana, centímetros o expresiones mixtas, se rechazan en vez de estimarse. En calc(), convierta cada término compatible por separado y conserve la estructura.