Saltar al contenido
TextArray
Totalmente local

Conversor de unidades CSS

Convierta longitudes de CSS entre px, rem, em, pt y % con cualquier tamaño de fuente raíz.

Entrada
Salida

Conversor de unidades CSS

Pegue los valores CSS uno por línea (16px, 1,5rem, 12pt, 150%) y este conversor los traducirá instantáneamente. Un número simple se lee en la unidad establecida por la selección Desde, mientras que una unidad escrita en la línea siempre gana, por lo que puede mezclar píxeles y rems en una lista. Elija un objetivo en Para o elija Todas las unidades para ver la cadena completa de un vistazo: 16px = 1rem = 12pt = 100%. Las líneas que no son valores simples pasan sin cambios, por lo que un comentario perdido nunca interrumpe la ejecución.

Las matemáticas dependen de un número: el tamaño base, el tamaño de fuente raíz en píxeles. Los navegadores tienen por defecto 16px, por lo que 1rem suele ser igual a 16px y 100% es igual a la base. Establece la base en 10 para el truco clásico del 62,5% donde 1,5rem es 15px, o combina un sistema de diseño con una raíz diferente. Los puntos los fija el propio CSS: 1 px es 1/96 de pulgada y 1 pt es 1/72, por lo que 16 px es exactamente 12 pt independientemente de la base. La opción de decimales limita la precisión hasta en seis lugares, con los ceros finales recortados.

Rem es la unidad amigable con la accesibilidad: escala con la preferencia de tamaño de fuente del navegador del lector, por lo que el texto establecido en rem crece cuando alguien aumenta su tamaño predeterminado, mientras que px permanece fijo. Em usa la misma matemática aquí, pero en una hoja de estilo real es relativa al tamaño de fuente del elemento, por lo que los valores de em anidados se componen donde rem no lo hace; este convertidor asume el caso plano, relativo a la raíz.

Todo se ejecuta localmente en su navegador: no se carga nada y no hay nada que esperar. Copie la lista convertida o descárguela como un archivo .txt.

Preguntas frecuentes

¿Por qué utilizar rem en lugar de px?
Los valores Rem escalan con el tamaño de fuente que el lector establece en su navegador, por lo que las personas que necesitan texto más grande realmente lo obtienen. Los valores de Px ignoran esa preferencia. Convertir un diseño basado en px a rem es una de las ventajas de accesibilidad más baratas que existen.
¿Cuál es el tamaño base y por qué el valor predeterminado es 16?
Es el tamaño de fuente raíz en píxeles, a lo que se refieren 1rem, 1em y 100%. Todos los navegadores principales vienen con un valor predeterminado de 16px, por lo que 16 es la base correcta a menos que su hoja de estilo cambie la raíz, por ejemplo html { font-size: 62.5% } que hace que la base sea 10.
¿Cuál es la diferencia entre em y rem?
Rem siempre es relativo al tamaño de fuente raíz; em es relativo al elemento actual, por lo que los valores de em anidados se multiplican. Este convertidor trata ambos con un tamaño de base único: la caja plana. En el marcado profundamente anidado, los valores em reales pueden diferir.
¿Qué pasa con las líneas que no son valores?
Pasan a la salida sin cambios y el recuento los cuenta como omitidos. Sólo se convierten valores simples como 16px, 1.5rem o un número simple; las declaraciones CSS completas están fuera de alcance.
¿Mi texto está subido a alguna parte?
No. La herramienta se ejecuta completamente en su navegador y su entrada nunca sale de su dispositivo.