Pixel ↔ REM
Convierte entre píxeles y REM para CSS
Cómo usar Pixel ↔ REM
Convierte entre píxeles y REM para CSS. Configura tu tamaño base. Conversión instantánea. Calculadora gratuita online.
¿Por qué los desarrolladores web convierten entre píxeles y REM?
La buena práctica moderna de CSS favorece las unidades relativas (REM, EM) sobre los píxeles absolutos para tamaños de fuente y espaciado. Esto garantiza que los usuarios que configuran un tamaño de fuente mayor en las preferencias de su navegador vean el texto escalado de forma apropiada —un requisito fundamental de accesibilidad.
- Tamaño de fuente: En lugar de
font-size: 16px, usafont-size: 1rem. Si la fuente base del navegador del usuario es 20px, todo escala proporcionalmente. - Espaciado y relleno: Los márgenes y el padding en REM se escalan con la preferencia de fuente del usuario.
padding: 1.5remes más accesible quepadding: 24px. - Implementación de sistemas de diseño: Las herramientas de diseño (Figma, Sketch) exportan valores en píxeles. Conviértelos a REM antes de escribir CSS para que el sistema de diseño sea accesible por defecto.
- Media queries: Las media queries basadas en REM respetan la preferencia de tamaño de fuente del usuario.
@media (min-width: 48rem)se activa a 768px para una base de 16px, pero a un valor de píxeles más alto para usuarios con fuentes más grandes. - Bibliotecas de componentes: Construir componentes reutilizables en REM garantiza que se comporten de forma consistente en diferentes contextos de tamaño de fuente base.
REM vs EM: REM (Root EM) es siempre relativo al tamaño de fuente del elemento raíz (html) —consistente y predecible. EM es relativo al tamaño de fuente del elemento actual —puede acumularse inesperadamente en elementos anidados. REM es preferible para la mayoría de usos.
Frequently Asked Questions
¿Cuál es el tamaño de fuente predeterminado del navegador?
El valor predeterminado es 16px en todos los navegadores principales (Chrome, Firefox, Safari, Edge). Los usuarios pueden cambiarlo en la configuración del navegador —este es el punto de usar REM. 1rem = 16px por defecto, pero podría ser 18px, 20px o incluso 12px según las preferencias del usuario.
¿Por qué algunos desarrolladores usan html { font-size: 62.5% }?
Establecer el tamaño de fuente raíz al 62,5% de 16px = 10px facilita el cálculo: 1,6rem = 16px, 2,4rem = 24px. Es un truco común pero anula el tamaño de fuente preferido del usuario, deshaciendo parcialmente el propósito de accesibilidad de usar REM.
¿Cuándo debo usar PX en lugar de REM?
Usa PX para bordes (los bordes de 1px siempre deben ser 1px), sombras de caja y elementos donde el tamaño exacto en píxeles importa independientemente de las preferencias de fuente. Usa REM para tamaños de fuente, padding, margin y cualquier espaciado que deba escalar con el texto.
¿Cuál es la diferencia entre REM, EM y PX?
PX es una unidad absoluta —siempre el mismo tamaño independientemente de la configuración. EM es relativo al tamaño de fuente del elemento padre —se acumula en elementos anidados. REM es relativo al tamaño de fuente raíz (html) —consistente en todo el documento. Para diseño accesible, prefiere REM sobre PX para tamaños de fuente y espaciado.
¿Cómo convierto todo un diseño de píxeles a REM?
Divide cada valor de píxeles entre el tamaño de fuente raíz (por defecto: 16). Así, 24px ÷ 16 = 1,5rem. Las funciones de Sass (px-to-rem()) o los plugins de PostCSS pueden automatizar esta conversión en toda una base de código.
REM vs EM vs PX vs VW/VH vs porcentajes
PX es absoluto —preciso pero no escalable. REM escala con el tamaño de fuente raíz —mejor para tipografía y espaciado. EM escala con el tamaño de fuente del padre —útil para espaciado a nivel de componente pero puede acumularse. VW/VH son porcentajes del viewport —útiles para layouts fluidos y secciones a pantalla completa. Los porcentajes son relativos al elemento padre —esenciales para anchos responsivos. El CSS moderno usa una combinación: REM para tipografía y espaciado, VW/VH para layout y porcentajes para anchos.