Conversor de Unidades CSS
Escribe el valor y la unidad en la fila superior y abajo verás al instante px, rem, em, %, vw y el resto de unidades CSS, junto con una vista previa del tamaño real.
Entrada
Escribe un valor y todas las unidades se convertirán automáticamente.
Resultado
Cada valor se convierte pasando primero por px; rem usa la fuente raíz, em y % usan la fuente del elemento, vw/vh/vmin/vmax usan el viewport y pt/pc/in/cm/mm usan el estándar 96px = 1in.
sin rodeos.
- Todo a la vistaLa zona de entrada y los resultados se reconocen rápido.
- Resultado primeroEl número principal va delante; el detalle queda debajo.
- Menos requisitosSin registro ni datos innecesarios antes de usar la herramienta.
Unidades CSS: cómo no perderse entre px y rem
El conversor de unidades CSS te muestra al instante cuánto vale un mismo tamaño expresado en otras unidades. Escribe el valor y la unidad en la fila superior y verás cómo cambian a la vez px, rem, em, %, vw y el resto de unidades de longitud, junto con una regla que marca la longitud real en píxeles y una muestra de texto renderizada a su tamaño real.
La relación entre unidades depende del tamaño de fuente raíz, del tamaño de fuente del elemento (o de su padre) y del tamaño de pantalla (viewport). Por eso la herramienta convierte primero el valor a px y luego lo recalcula para cada unidad; si cambias la fuente raíz, la fuente del elemento o el viewport, los resultados se actualizan al momento.
¿Por qué hay tantas unidades CSS?
Las unidades de longitud CSS se dividen en absolutas y relativas. Las absolutas (px, pt, cm...) tienen un valor fijo; las relativas (rem, em, %, vw...) se calculan a partir de otro valor de referencia. En diseño responsive se usan mucho las relativas porque el tamaño necesita adaptarse a la pantalla y a la configuración del usuario.
- Absolutas: px, pt, pc, in, cm, mm
- Relativas (según fuente): rem, em, %
- Relativas (según pantalla): vw, vh, vmin, vmax
Cómo convierte los valores esta herramienta
El valor introducido se convierte primero a px, y a partir de ese px se recalcula cada unidad. Por eso da igual con qué unidad empieces: el resto se rellena automáticamente. No hace falta pulsar ningún botón, se actualiza al escribir.
- px equivalente = valor × (px por unidad)
- rem depende de la fuente raíz; em y % de la fuente del elemento
- vw/vh dependen del tamaño del viewport
Diferencia entre px, rem y em
px es un píxel fijo, rem es un múltiplo del tamaño de fuente del elemento raíz (html) y em es un múltiplo del tamaño de fuente del propio elemento (o de su padre). Como esta herramienta tiene dos campos separados —fuente raíz y fuente del elemento—, si les das valores distintos, rem y em dejan de coincidir: rem solo sigue a la fuente raíz y em solo sigue a la fuente del elemento. Para accesibilidad, si el usuario aumenta el tamaño de fuente del navegador, rem y em crecen con él, pero px se queda igual.
- px: tamaño fijo, ignora la configuración del usuario
- rem: fuente raíz × valor (con raíz 16px, 1rem = 16px)
- em: fuente del elemento × valor (se acumula si hay anidamiento)
¿Respecto a qué se calcula el %?
El % cambia por completo según de qué propiedad se trate: en font-size es relativo a la fuente del padre, en width al ancho del padre, en line-height a la propia fuente del elemento. Esta herramienta calcula el % respecto al tamaño de fuente del elemento (el mismo campo que usa em), así que 100% equivale exactamente al tamaño de fuente del elemento. Si necesitas otro contexto, como el % de un ancho, tendrás que interpretarlo según ese caso.
vw, vh, vmin y vmax: las unidades de pantalla
Las unidades de viewport se basan en el tamaño de la ventana del navegador. 1vw equivale al 1% del ancho de la pantalla, 1vh al 1% de la altura; vmin toma el lado más corto y vmax el más largo. Por eso, si cambias el ancho o el alto del viewport en la herramienta, los resultados de vw/vh/vmin/vmax varían.
- 1vw = ancho del viewport ÷ 100
- 1vh = alto del viewport ÷ 100
- vmin/vmax = lado corto/largo ÷ 100
pt, pc, in, cm y mm: las unidades físicas
En pantalla, las unidades físicas de CSS también se convierten con la regla 96px = 1in. Es decir, 1in = 96px, 1cm ≈ 37,8px, 1mm ≈ 3,78px, 1pt = 1/72in ≈ 1,333px y 1pc = 12pt = 16px. Se usan sobre todo en hojas de estilo para impresión, pero en pantalla se convierten con esta misma proporción.
- 1in = 96px
- 1pt = 96/72 ≈ 1,333px
- 1pc = 16px, 1cm ≈ 37,8px, 1mm ≈ 3,78px
Ejemplo con fuente raíz de 16px y rem
El tamaño de fuente raíz por defecto del navegador suele ser 16px. Así que 24px pasados a rem son 24 ÷ 16 = 1,5rem. Al revés, 1,5rem equivalen a 16 × 1,5 = 24px. Si cambias la fuente raíz a 20 en la herramienta, esos mismos 24px se recalculan como 1,2rem, sin que em se vea afectado, porque em depende del campo de fuente del elemento.
Ejemplo con fuente del elemento y em
Si el campo de fuente del elemento vale 16px, 24px equivalen a 1,5em, igual que con rem cuando la raíz también es 16px. Pero si cambias solo la fuente del elemento a 20px (dejando la raíz en 16px), esos mismos 24px pasan a ser 1,2em, mientras que rem sigue en 1,5rem. Por eso em depende del elemento, no de la raíz, y puede diferir de rem.
Qué unidad usar en cada caso en diseño responsive
No hay una única respuesta correcta, pero hay criterios habituales: para el tamaño de texto se usa rem (respeta la configuración del usuario y no depende del contexto), para márgenes y espaciados rem o px, para el ancho de elementos % o unidades de viewport, y para textos grandes tipo hero se combina clamp() con vw. En media queries suele usarse em como referencia.
- Tamaño de texto: rem (accesibilidad)
- Márgenes/espaciados: rem o px
- Ancho de layout: % o vw
- Tamaños fluidos: clamp() + vw
Copiar el valor y usarlo directamente
Al pasar el ratón o el foco por cada tarjeta de unidad aparece un botón de copiar. Al pulsarlo, se copia al portapapeles el texto completo con la unidad incluida, por ejemplo «1,5rem», listo para pegar en tu CSS. Si configuras antes la fuente raíz, la fuente del elemento y el viewport que usas habitualmente, todas las conversiones posteriores se calculan con esa misma referencia.
- Copiar tarjeta de unidad = valor + unidad
- Configura antes la fuente raíz, la fuente del elemento y el viewport
- Usa el botón de ejemplo para probar con 24px
Preguntas frecuentes sobre la conversión de unidades CSS
¿Cómo se convierte px a rem?
Divide el valor en px entre el tamaño de fuente raíz. Con una raíz de 16px, 24px ÷ 16 = 1,5rem. Al escribir el valor en px, la herramienta calcula automáticamente rem y el resto de unidades, y si cambias la fuente raíz, los resultados se recalculan al instante.
¿Cuál es la diferencia entre rem y em?
rem siempre se calcula respecto al tamaño de fuente del elemento raíz (html), mientras que em se calcula respecto al tamaño de fuente del propio elemento (o de su padre). Por eso em se acumula cuando hay anidamiento. En esta herramienta rem usa el campo de fuente raíz y em usa el campo de fuente del elemento, así que si les das valores distintos, rem y em dan resultados diferentes para el mismo px.
¿Por qué el tamaño de fuente raíz suele ser 16?
Porque el tamaño de fuente por defecto de la mayoría de navegadores es 16px, así que 1rem = 16px de forma predeterminada. Puede cambiar si el usuario modifica la configuración del navegador o si se ajusta el tamaño de fuente del html por CSS; en esta herramienta puedes cambiarlo directamente en el campo de fuente raíz.
¿Respecto a qué se calcula el %?
En CSS, el % se calcula respecto a algo distinto según la propiedad (fuente del padre, ancho del padre, etc.). Esta herramienta calcula el % respecto al tamaño de fuente del elemento (el mismo campo que usa em): 100% equivale al tamaño de fuente del elemento. Si necesitas otro contexto, como el % de un ancho, tendrás que interpretarlo según ese caso.
¿Cómo se calculan vw y vh?
1vw equivale al 1% del ancho del viewport (la ventana del navegador) y 1vh al 1% de su alto. Si cambias el ancho o el alto del viewport en la herramienta, los resultados de vw, vh, vmin y vmax se recalculan en consecuencia. El valor por defecto es 1920×1080.
¿Puedo redondear los decimales largos que salen?
En la mayoría de casos sí, y de hecho la herramienta ya muestra valores redondeados para que sean más legibles. Aun así, si usas rem o em con su decimal completo, el navegador los calcula con exactitud; así que cuando el resultado en px no sea un número exacto, suele ser más preciso usar el decimal en rem o em que el píxel redondeado.
Fecha de referencia: 17-07-2026. Las conversiones siguen el estándar 96px = 1in de W3C CSS Values y MDN.