¿Odias los anuncios? Ir Sin publicidad Hoy 

Convertidor de Píxeles / REM / EM (Unidades CSS)

DesarrolladorTexto

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

Unidades de Ventana Gráfica

Ventana Gráfica	vw	vh
360px (Móvil)
768px (Tableta)
1280px (Portátil)
1920px (Escritorio)

Tabla de Referencia

Píxeles	REM	EM	PT
8px
10px
12px
14px
16px
18px
20px
24px
32px
48px
64px

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

Guía

Convertidor de Píxeles / REM / EM

Convierta instantáneamente entre unidades CSS: píxeles (px), root em (rem) y em. Ajuste el tamaño de fuente base y observe cómo todos los valores se actualizan en tiempo real. Perfecto para desarrolladores front-end que traducen especificaciones de diseño a CSS.

Cómo utilizar

Ingrese un valor en cualquiera de los tres campos de unidad — px, rem o em — y los otros dos se actualizarán instantáneamente. Ajuste el tamaño de fuente base (predeterminado 16px) usando el deslizador o el campo de entrada para que coincida con el tamaño de fuente raíz de su proyecto. La tabla de referencia a continuación muestra conversiones comunes de un vistazo.

Características

Conversión bidireccional – Edite px, rem o em y todos los demás se actualizarán instantáneamente
Tamaño de fuente base ajustable – El deslizador y la entrada se sincronizan, predeterminado 16px
Tabla de Referencia – Tamaños comunes precalculados para su tamaño de fuente base
Actualizaciones en tiempo real – Entrada con aceleración limitada para un rendimiento fluido
Solo Lado del Cliente – No se envían datos a ningún servidor

ANUNCIO PUBLICITARIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Cuál es la diferencia entre rem y em en CSS?

rem (root em) es relativo al tamaño de fuente del elemento raíz (html), lo que lo hace consistente en toda la página. em es relativo al tamaño de fuente del elemento padre, lo que puede acumularse en elementos anidados. rem es generalmente preferido para la consistencia del diseño.
¿Por qué 1rem es igual a 16px por defecto?

Los navegadores establecen un tamaño de fuente raíz predeterminado de 16px a menos que se anule. Por lo tanto, 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Si establece html { font-size: 62.5%; }, entonces 1rem = 10px, lo que facilita los cálculos.
¿Cuándo debo usar px en lugar de rem o em?

Use px para valores que no deben escalar con las preferencias de fuente del usuario, como bordes, sombras o puntos de interrupción de consultas de medios. Use rem para tamaños de fuente y espaciado para que su diseño respete la configuración de accesibilidad del usuario. Use em para dimensionar según el componente.
¿Cómo afecta el zoom del navegador a las unidades CSS?

El zoom del navegador escala todas las unidades CSS proporcionalmente, incluido px. Esto es diferente del escalado de texto a nivel del sistema operativo. Sin embargo, si un usuario cambia el tamaño de fuente predeterminado de su navegador, los valores rem y em se ajustan mientras que los valores px no, lo que hace que rem/em sean mejores para la accesibilidad.