Conversor de px a rem, em y vw
Pasar píxeles a unidades relativas es una tarea constante al escribir CSS responsive. Con el tamaño base y el ancho de ventana configurables, el cálculo cuadra con el proyecto real.
—————Equivalencias habituales
Valores calculados con el tamaño base indicado arriba.
Cómo usar el conversor
- Escribir el valor y elegir la unidad de origen.
- Ajustar el tamaño base del html. En los navegadores es de 16 px salvo que el proyecto lo cambie.
- Indicar el tamaño del elemento padre para calcular em y porcentaje, y el ancho de ventana para vw.
- Copiar el valor CSS de la unidad que interese.
Cómo se calcula
rem= px ÷ tamaño base del htmlem= px ÷ tamaño de fuente del elemento padrevw= px ÷ ancho de ventana × 100%= px ÷ tamaño de fuente del elemento padre × 100 (al aplicarlo a font-size)
Preguntas frecuentes
¿Qué diferencia hay entre rem y em?
rem toma como referencia el tamaño de fuente del elemento raíz (html). em depende del elemento padre, así que los valores pueden acumularse en elementos anidados.
¿Por qué 16 px es el valor por defecto?
Es el tamaño de fuente que aplican los navegadores por defecto. Si el proyecto fija otro valor en html, hay que cambiar el tamaño base en el conversor.
¿Conviene usar rem en lugar de px?
Para tipografía y espaciados, rem respeta la preferencia de tamaño de texto de cada persona, lo que mejora la accesibilidad. Para bordes finos suele bastar con px.
¿Cómo se convierte vw a px?
Se multiplica el valor por el ancho de ventana y se divide entre 100. Con 1.440 px de ancho, 1vw equivale a 14,4 px.
¿Se aceptan decimales con coma?
Sí. Los valores 1,5 y 1.5 se interpretan igual.