Conversor de Unidades CSS

Referencia

Unidades CSS

CSS ofrece unidades absolutas y relativas. Las unidades absolutas como px son fijas sin importar el contexto. Las unidades relativas como rem, em y vw escalan según una referencia, siendo esenciales para diseños responsivos y accesibles.

px, rem, em, vw

px (píxeles) — unidad absoluta. 1px es un píxel independiente del dispositivo. Úsala para bordes, sombras y elementos que no deben escalar con el tamaño de fuente.

rem (root em) — relativa al tamaño de fuente del elemento raíz (html). El tamaño raíz por defecto en navegadores es 16px. Preferida para tamaños de fuente y espaciados porque respeta la configuración del usuario.

em — relativa al tamaño de fuente del elemento padre. Puede acumularse en elementos anidados. Útil para paddings y márgenes que deben escalar con el propio tamaño de fuente del elemento.

vw (viewport width) — 1vw = 1% del ancho del viewport. Ideal para tipografía fluida y layouts de ancho completo que se adaptan al tamaño de pantalla.

Conversiones comunes de px a rem

Con la base predeterminada del navegador de 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Para unidades de viewport en un diseño de 1440px: 14.4px = 1vw, 72px = 5vw.

Por qué rem es preferido para la accesibilidad

Usar rem para tamaños de fuente respeta la preferencia de tamaño de fuente del navegador del usuario. Cuando un usuario configura su navegador a 20px en lugar del predeterminado 16px, los layouts basados en rem escalan proporcionalmente mientras que los layouts basados en px permanecen fijos. WCAG 1.4.4 (Cambiar el tamaño del texto) requiere que el texto pueda ampliarse hasta un 200% sin pérdida de contenido o funcionalidad — las unidades rem cumplen este requisito de forma natural.

Privacidad

Toda la conversión se ejecuta 100% en tu navegador. Ningún dato se envía a ningún servidor.