Convertidor de PX a REM

px (píxeles) es una unidad absoluta — 16 px siempre son 16 px independientemente de la configuración del usuario. rem (root em) es relativo al tamaño de fuente del elemento raíz (elemento html). El tamaño de fuente raíz predeterminado del navegador es 16 px, por lo que 1 rem = 16 px por defecto. Si un usuario cambia el tamaño de fuente de su navegador (por accesibilidad), las unidades rem se escalan en consecuencia, pero las unidades px no. Esto hace que rem sea preferido para tamaños de fuente y espaciado en diseños accesibles.

rem respeta las preferencias de tamaño de fuente del usuario establecidas en la configuración de accesibilidad del navegador. Los usuarios con discapacidades visuales pueden aumentar el tamaño de fuente base a 20 px o 24 px — los diseños basados en rem escalan correctamente, los basados en px no. rem también facilita el escalado: cambie el tamaño de fuente raíz y todos los valores rem se escalan proporcionalmente. El criterio de éxito WCAG 2.1 1.4.4 (Cambiar el tamaño del texto) recomienda unidades escalables. Tailwind CSS usa rem para todas las utilidades de tamaño.

Tailwind usa una base de 1 rem = 16 px por defecto. La unidad base de 4 px: text-xs (12 px = 0,75 rem), text-sm (14 px = 0,875 rem), text-base (16 px = 1 rem), text-lg (18 px = 1,125 rem), text-xl (20 px = 1,25 rem), text-2xl (24 px = 1,5 rem). Espaciado: p-4 = 1 rem = 16 px, p-8 = 2 rem = 32 px. Para cambiar la base: establezca html { font-size: 10px } y entonces 1 rem = 10 px (hacer 1 rem = 10 px es un truco común: 16 px = 1,6 rem).

Establecer html { font-size: 62.5% } hace que el tamaño de fuente raíz sea el 62,5% de 16 px = 10 px. Esto significa 1 rem = 10 px, simplificando las matemáticas mentales: 16 px = 1,6 rem, 24 px = 2,4 rem, 100 px = 10 rem. Esto hace que rem sea tan fácil de usar como px. Desventaja: debe recordar establecer body { font-size: 1.6rem } (16 px para el texto del cuerpo) ya que html ahora es 10 px. Algunos equipos evitan esto porque anula las preferencias de tamaño de fuente del usuario (62,5% del tamaño elegido por el usuario, no 16 px).

em es relativo al tamaño de fuente del elemento padre (no de la raíz). Use em para: escalado a nivel de componente (el padding del botón escala con el tamaño de fuente del botón), media queries (las consultas basadas en em respetan mejor los cambios de tamaño de fuente del usuario que las consultas en px), letter-spacing y line-height relativos al tamaño de fuente del elemento actual. Evite em para el espaciado del diseño donde los componentes anidados podrían causar un escalado compuesto inesperado. rem para escala global, em para valores relativos al componente.