Conversor de PX a REM

Tablas de conversión de PX a REM

Píxeles (PX) a REM

Píxeles REM
1px 0.0625rem
2px 0.125rem
3px 0.1875rem
4px 0.25rem
5px 0.3125rem
6px 0.375rem
8px 0.5rem
10px 0.625rem
12px 0.75rem
14px 0.875rem
15px 0.9375rem
16px 1rem
18px 1.125rem
20px 1.25rem
24px 1.5rem
25px 1.5625rem
28px 1.75rem
32px 2rem
36px 2.25rem
40px 2.5rem
44px 2.75rem
48px 3rem
50px 3.125rem
56px 3.5rem
64px 4rem
72px 4.5rem
75px 4.6875rem
80px 5rem
90px 5.625rem
100px 6.25rem

REM a píxeles (PX)

Asume el tamaño de fuente predeterminado estándar del navegador de 16px

REM Píxeles
0.01rem 0.16px
0.03rem 0.48px
0.05rem 0.8px
0.08rem 1.28px
0.1rem 1.6px
0.15rem 2.4px
0.2rem 3.2px
0.5rem 8px
1rem 16px
2rem 32px
3rem 48px
4rem 64px
5rem 80px
6rem 96px
8rem 128px
10rem 160px
15rem 240px
20rem 320px
30rem 480px
40rem 640px
50rem 800px
60rem 960px
80rem 1280px
100rem 1600px

Conversión de PX a REM en CSS

PX (píxeles) y REM (root em) son dos unidades utilizadas para definir tamaños de elementos en Hojas de Estilo en Cascada (CSS). Comprender cómo convertir entre ellas es crucial para crear páginas web responsivas y adaptables.

He aquí un desglose de la conversión de PX a REM:

1. Unidades:

  • PX (Píxeles) es una unidad absoluta que representa un número fijo de píxeles en la pantalla. Es independiente de la configuración del tamaño de fuente del usuario.
  • REM (Root Em): Una unidad relativa basada en el tamaño de fuente del elemento raíz HTML. Por defecto, el tamaño de fuente raíz es 16px en la mayoría de los navegadores. Por lo tanto, 1rem equivale a 16px.

2. ¿Por qué utilizar REM?

  • Capacidad de respuesta: REM permite que los elementos se escalen proporcionalmente con la preferencia de tamaño de fuente del usuario. Esto es esencial para el diseño web responsivo, asegurando que su sitio web se adapte a diferentes tamaños de pantalla y preferencias del usuario.
  • Mantenibilidad: El uso de REM en sus hojas de estilo facilita el mantenimiento de tamaños de fuente consistentes en todo su sitio web. Cambiar el tamaño de fuente raíz ajusta automáticamente todos los elementos basados en REM.

3. Fórmula de conversión:

Para convertir PX a REM, divida el valor en píxeles por el tamaño de la fuente raíz (generalmente 16px):

rem_value = px_value / root_font_size

Por ejemplo, para convertir 24px a rem asumiendo un tamaño de fuente raíz de 16px:

rem_value = 24px / 16px = 1.5rem

4. Puntos importantes:

  • La conversión depende del tamaño de la fuente raíz. Si modifica el tamaño de la fuente raíz en su CSS, los valores REM tendrán un efecto diferente.
  • Los navegadores suelen utilizar un tamaño de fuente raíz predeterminado de 16px. No obstante, es una buena práctica definir explícitamente el tamaño de la fuente raíz en su CSS para un mejor control.
  • Si bien REM ofrece ventajas en términos de capacidad de respuesta, pueden existir situaciones en las que se prefiera PX, como para elementos de tamaño fijo como iconos o bordes.

5. Consideraciones adicionales:

  • Compatibilidad con navegadores: Aunque REM es ampliamente compatible, siempre es aconsejable verificar la compatibilidad con navegadores más antiguos.
  • Elementos anidados: Al utilizar REM dentro de elementos anidados, se aplica la herencia del tamaño de fuente. El valor REM es relativo al tamaño de fuente del elemento padre más cercano, no al tamaño de fuente raíz.