Convertidor de Unidades CSS - px a rem, em, vw, vh y % en Línea
Convierte entre unidades CSS (px, rem, em, %, vw, vh) con tamaño de fuente base y dimensiones del viewport configurables.
Preguntas Frecuentes
¿Qué es un convertidor de unidades CSS?
Un convertidor de unidades CSS es una herramienta que traduce valores entre diferentes unidades de longitud CSS como píxeles (px), root em (rem), em, porcentaje (%), ancho del viewport (vw) y alto del viewport (vh). Como estas unidades representan diferentes sistemas de medición, un convertidor ayuda a los desarrolladores a encontrar rápidamente valores equivalentes sin cálculos manuales.
¿Cómo uso este convertidor de unidades CSS?
Ingrese un valor numérico en el campo de entrada, seleccione su unidad de origen (ej., px) y todos los valores equivalentes en otras unidades (rem, em, %, vw, vh) se mostrarán instantáneamente. Puede ajustar el tamaño de fuente base y las dimensiones del viewport en el panel de configuración. Haga clic en el botón de copiar junto a cualquier salida para copiar el valor listo para CSS.
¿Cuál es la diferencia entre rem y em?
Tanto rem como em son unidades CSS relativas basadas en el tamaño de fuente, pero hacen referencia a diferentes elementos. rem siempre es relativo al tamaño de fuente del elemento raíz (<html>, por defecto 16px). em es relativo al tamaño de fuente del elemento padre. Esto significa que rem produce un dimensionamiento consistente en toda la página, mientras que em se acumula cuando los elementos están anidados.
¿Por qué debería usar rem en lugar de px?
Usar rem en lugar de px mejora la accesibilidad y la responsividad. Cuando los usuarios cambian el tamaño de fuente predeterminado de su navegador, los diseños basados en rem se escalan proporcionalmente mientras que los basados en px permanecen fijos. Esto hace que su sitio sea más accesible para usuarios con discapacidades visuales.
¿Cómo afecta el tamaño de fuente base a las conversiones?
El tamaño de fuente base (predeterminado: 16px) determina la relación entre px y rem/em. Por ejemplo, con base 16px: 1rem = 16px, 0.875rem = 14px, 1.5rem = 24px. Si su proyecto establece un tamaño de fuente raíz diferente, debe actualizar la configuración de tamaño de fuente base en esta herramienta para obtener conversiones precisas.
¿Qué son las unidades de viewport (vw y vh)?
Las unidades de viewport son relativas a las dimensiones de la ventana del navegador. 1vw equivale al 1% del ancho del viewport, y 1vh equivale al 1% del alto del viewport. Por ejemplo, en una pantalla de 1920px de ancho, 50vw equivale a 960px. Se utilizan comúnmente para diseños responsivos de ancho o alto completo.
¿Cómo funcionan las unidades de porcentaje (%) en CSS?
Las unidades de porcentaje en CSS son relativas a la dimensión correspondiente del elemento padre. Para propiedades relacionadas con el ancho, % es relativo al ancho del padre. Esta herramienta convierte % basándose en el ancho del elemento padre configurado, que puede ajustar en la configuración.
¿Son seguros mis datos al usar esta herramienta?
Sí. Este convertidor de unidades CSS se ejecuta completamente en su navegador usando JavaScript del lado del cliente. No se envían valores de entrada ni resultados de conversión a ningún servidor. Sus datos permanecen en su dispositivo en todo momento.
Ejemplos de Código
// CSS Unit Conversion Functions
function toPx(value, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return value;
case 'rem': return value * baseFontSize;
case 'em': return value * parentFontSize;
case '%': return (value / 100) * parentWidth;
case 'vw': return (value / 100) * viewportWidth;
case 'vh': return (value / 100) * viewportHeight;
}
}
function fromPx(px, unit, ctx = {}) {
const { baseFontSize = 16, parentFontSize = 16,
viewportWidth = 1920, viewportHeight = 1080, parentWidth = 1920 } = ctx;
switch (unit) {
case 'px': return px;
case 'rem': return px / baseFontSize;
case 'em': return px / parentFontSize;
case '%': return (px / parentWidth) * 100;
case 'vw': return (px / viewportWidth) * 100;
case 'vh': return (px / viewportHeight) * 100;
}
}
function convert(value, from, to, ctx) {
return fromPx(toPx(value, from, ctx), to, ctx);
}
// Usage
const ctx = { baseFontSize: 16, viewportWidth: 1440 };
console.log(convert(24, 'px', 'rem', ctx)); // 1.5
console.log(convert(2, 'rem', 'px', ctx)); // 32
console.log(convert(50, 'vw', 'px', ctx)); // 720