01
Separar las referencias
rem depende de la fuente raíz y em de la fuente padre indicada. vw y vh usan las dimensiones introducidas, no el tamaño actual de esta pestaña.
HTML / CSS / código frontend
conversor de unidades CSSCada unidad con su referencia visible
Introduce una longitud o cambia a clamp, calc y relación de aspecto.
conversor de unidades CSS
Entrada
Los valores se calculan en este navegador y no se envían.
Resultado
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vhOpciones
Cálculo listo.
Cuando una maqueta marca 24px y el componente necesita rem o vw, el valor depende del contexto. Este conversor de unidades CSS separa la fuente raíz de la fuente padre y pide la anchura y la altura del viewport para convertir vw y vh.
El cálculo px a rem es solo el primer paso. La calculadora CSS clamp permite crear un tamaño fluido y la conversión vw vh comparte las mismas referencias. El conversor de unidades CSS también usa ese contexto al evaluar las expresiones calc() admitidas.
¿Por qué usar este conversor de unidades CSS?
Las bases de las unidades relativas quedan a la vista.
Una medida en cinco unidades
El conversor de unidades CSS muestra px, rem, em, vw y vh para una misma longitud. Cambiar la fuente raíz afecta a rem y cambiar la fuente padre afecta a em. Son valores del contexto indicado, no estilos leídos de otra web.
Una curva fluida con límites comprobables
Dos anchuras de viewport y los tamaños deseados en ellas determinan la pendiente en vw. Prueba 768px para ver el tamaño interpolado y saber si clamp() ya ha llegado a alguno de sus límites.
Comprobar el contexto antes de copiar
02
Controlar la actualización
El cálculo automático espera 350 ms tras un cambio. Al desactivarlo, Ctrl/Cmd+Intro ejecuta el modo actual; un resultado anterior no se puede copiar mientras esté obsoleto.
03
Examinar el resultado intermedio
En clamp, prueba una anchura entre los extremos. En relación de aspecto, compara la fracción reducida con la altura calculada para tu anchura de destino.
Cuatro operaciones para medidas responsivas
Tabla de cinco unidades
Introduce una longitud en px, rem, em, vw o vh y consulta todos sus equivalentes. Un número sin sufijo se toma como px.
Generador de clamp()
Dos tamaños y dos anchuras producen una interpolación lineal. Puedes elegir límites en rem o px y ver el valor en una anchura de prueba.
Evaluador acotado de calc()
Calcula en px expresiones con las cinco unidades, paréntesis y aritmética básica. La multiplicación y la división solo admiten un factor sin unidad.
Relación de aspecto
Reduce dimensiones enteras a una proporción, crea la declaración aspect-ratio y calcula la altura para una anchura de destino.
Límites que importan al reutilizar el valor
- Cada unidad relativa tiene una base
- El conversor de unidades CSS no inspecciona los estilos de tu sitio. rem, em, vw y vh dependen de los cuatro valores que escribas aquí.
- calc() no es un intérprete CSS completo
- Se rechazan %, var(), env(), unidades desconocidas y operaciones entre dimensiones incompatibles. Sin el bloque contenedor o la cascada no sería honesto prometer un valor en px.
- Los extremos de clamp deben estar ordenados
- La anchura inicial ha de ser menor que la final y el tamaño mínimo no puede superar el máximo. Los tamaños negativos generan un error en vez de CSS engañoso.
- No se procesan imágenes
- Las dimensiones originales y la anchura de destino han de ser enteros positivos. Se calcula una altura y aspect-ratio, sin recortar ni cambiar el archivo.
Preguntas sobre el conversor de unidades CSS
¿Cómo convertir px a rem?
Divide los píxeles por la fuente raíz: con 16px de base, 24px equivalen a 1,5rem. Ajusta la base si tu proyecto define otro tamaño.
¿En qué se diferencian em y rem?
rem usa la fuente del elemento raíz; em usa la fuente padre proporcionada. Por eso el valor em puede variar entre componentes anidados.
¿Cómo se calculan vw y vh en píxeles?
1vw es el 1 % de la anchura del viewport y 1vh el 1 % de su altura. Indica ambas dimensiones y convierte a través de px.
¿Cómo generar un valor clamp() para tipografía fluida?
Introduce dos anchuras de viewport y el tamaño deseado en cada una. La herramienta calcula la pendiente en vw y muestra una vista previa de clamp().
¿Por qué cambia el resultado si cambio la fuente raíz?
Porque rem se calcula con la fuente raíz. Si la cambias, también cambia el equivalente numérico; ajusta ese campo antes de copiar el resultado.
¿Otra pregunta?
Usar el conversor de unidades CSS
Vuelve al panel para comparar una medida, comprobar una fórmula o generar una dimensión fluida limitada.