Convertidor de unidades CSS

Un convertidor de unidades CSS traduce una longitud entre las unidades que utiliza CSS para el tipo de tamaño y el diseño: px, rem, em, pt y %. Existe porque el diseño responsivo moderno se apoya en unidades relativas (escala rem y em con la configuración del tamaño de fuente y el zoom del usuario), mientras que las maquetas de diseño y las hojas de estilo más antiguas generalmente se expresan en píxeles fijos. Esta herramienta toma un valor como 24px y lo muestra como 1,5rem, 1,5em, 18pt y 150% a la vez, y funciona en todas direcciones desde un solo campo.

Todas las conversiones dependen de un número: el tamaño de fuente raíz (base), que por defecto es 16px porque ese es el valor predeterminado del navegador para el elemento html. Un rem siempre es igual a ese tamaño de fuente base, por lo que a 16px el valor 16px es 1rem, 24px es 1,5rem y 8px es 0,5rem. Los puntos están vinculados al píxel de referencia CSS: 1 pulgada es 96px y 72pt, por lo que 1pt equivale a 96/72, aproximadamente 1,333px. El porcentaje se trata como una proporción del tamaño de fuente base, por lo que el 100% es igual a la base y el 50% es igual a la mitad.

Todo se ejecuta en su navegador mientras escribe, por lo que no hay carga, no hay espera en un servidor y no hay límite en la cantidad de valores que convierte. Cambie el tamaño de fuente base para modelar un componente que establezca su propio tamaño de fuente, lea los resultados en cada unidad y copie el que necesita. La tabla PX-to-REM incorporada le ofrece una referencia lista para los tamaños que más se presentan en una escala de tipo.