Conversor de Unidades CSS
Convierte px a rem, em, %, pt, pc, in, cm, mm, vw y vh: todas las unidades de longitud CSS a la vez, gratis y en tu navegador.
Base del cálculo
Todas las unidades CSS
= 16 px
| Unidad | Valor convertido | Copiar |
|---|---|---|
| px — Píxeles | 16px | |
| rem — Em de la raíz | 1rem | |
| em — Em del padre | 1em | |
| % — Porcentaje del padre | 100% | |
| pt — Puntos | 12pt | |
| pc — Picas | 1pc | |
| in — Pulgadas | 0.1667in | |
| cm — Centímetros | 0.4233cm | |
| mm — Milímetros | 4.2333mm | |
| vw — Ancho del viewport | 0.8333vw | |
| vh — Alto del viewport | 1.4815vh |
Todos los cálculos se hacen en tu navegador. Nada de lo que escribes se sube, se registra ni se guarda.
Cómo Usar el Conversor de Unidades CSS
- Escribe el número que quieres convertir en la casilla de valor —por ejemplo 24— y elige la unidad en la que está escrito ahora mismo: px, rem, vw, etc.
- Indica en "Tamaño de fuente raíz" el valor que usa tu elemento html. El navegador usa 16px por defecto, así que 24px equivalen a 1.5rem; si lo cambias a 10, esos mismos 24px pasan a ser 2.4rem.
- Rellena "Tamaño de fuente del padre" cuando trabajes con em o %. Ambas unidades se miden respecto al elemento padre y no respecto a la raíz, por eso tienen su propio campo.
- Cambia el ancho y el alto del viewport si diseñas para un breakpoint concreto. Los valores por defecto (1920 × 1080) corresponden a una pantalla de escritorio habitual y alimentan las filas vw y vh.
- Consulta la tabla de resultados —las once unidades se actualizan al instante— y pulsa "Copiar" en cualquier fila para llevarte al portapapeles un valor listo para pegar como 1.5rem.
¿Qué Es un Conversor de Unidades CSS?
Un conversor de unidades CSS traduce una misma medida a todas las unidades de longitud que reconoce la especificación, para que no tengas que hacer la cuenta a mano. La petición más frecuente es px a rem: el diseño llega desde Figma en píxeles, pero una hoja de estilos accesible se escribe en rem para que la maquetación crezca cuando alguien aumenta el tamaño de letra de su navegador.
El cálculo parte del píxel de referencia de CSS. Una pulgada son 96px, un punto son 96/72 px, una pica son 16px, un centímetro son 96/2.54 px y un milímetro son 96/25.4 px. Las unidades relativas dependen del contexto: rem se multiplica por el tamaño raíz, em y % por el tamaño del padre, y vw y vh son porcentajes del viewport. Como aquí puedes editar esos cuatro valores, los resultados encajan con tu proyecto real.
Cada resultado se redondea a cuatro decimales y se eliminan los ceros sobrantes, de modo que 1.5000rem se muestra simplemente como 1.5rem. Si además manejas medidas físicas u otras magnitudes, el conversor de unidades cubre longitud, peso y temperatura, la regla online muestra centímetros y pulgadas a tamaño real en pantalla y el conversor de colores hace lo mismo con HEX, RGB y HSL.
Preguntas Frecuentes (FAQ)
¿Cómo convierto px a rem?
Divide el valor en píxeles entre el tamaño de fuente raíz. Con el valor por defecto de 16px, 24px ÷ 16 = 1.5rem y 12px ÷ 16 = 0.75rem. Escribe los píxeles arriba, deja la raíz en 16 y la fila rem te da el resultado al momento.
¿Cómo paso de rem a px?
Multiplica los rem por el tamaño de fuente raíz: 2rem × 16 = 32px. Elige rem en el desplegable "Unidad de origen" y mira la fila px. Si tu hoja de estilos usa html { font-size: 62.5% }, pon 10 en el tamaño raíz antes de copiar.
¿Cuál es la diferencia entre rem y em?
rem siempre se mide respecto al tamaño de fuente de la raíz (html), mientras que em se mide respecto al tamaño del elemento padre. Por eso em se acumula al anidar elementos y por eso esta herramienta separa la raíz y el padre en dos campos.
¿Cuántos píxeles es 1pt en CSS?
En CSS, 1pt equivale a 96/72 px, es decir 1.3333px exactos. Así que 12pt se renderizan como 16px y 9pt como 12px. Los puntos vienen de la tipografía impresa y siguen siendo habituales en plantillas de correo.
¿Cómo convierto vw a px?
Multiplica los vw por el ancho del viewport y divide entre 100: 50vw en una pantalla de 1920px son 960px. Cambia el campo de ancho a tu breakpoint objetivo —1440, 1280 o 390 para móvil— y la fila px se recalcula sola.
¿Debo usar px o rem para el tamaño de letra?
Usa rem para tipografía y espaciados, así el diseño respeta la preferencia de tamaño de letra del visitante, lo que mejora la accesibilidad. px sigue siendo válido para bordes finos, sombras y todo lo que no deba escalar.
¿Por qué cambia el porcentaje al editar el tamaño del padre?
Los porcentajes de font-size y los espaciados en em se resuelven contra el elemento padre, no contra la raíz. Si el padre mide 20px, 1em son 20px y 100% son 20px: por eso ese campo mueve a la vez las filas em y %.
¿Es gratis y privado este conversor de unidades CSS?
Sí. Es gratuito, no pide registro y funciona íntegramente como JavaScript en el navegador. Nada de lo que escribes se envía a un servidor ni se comparte con terceros.
Consejos para Convertir Unidades CSS
- Consejo 1: Memoriza los atajos con la raíz de 16px: 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem y 32px = 2rem. Para el resto, deja que trabaje la tabla.
- Consejo 2: Si tu proyecto usa html { font-size: 62.5% } para que 1rem sean 10px, cambia el campo de tamaño raíz a 10 antes de copiar nada; de lo contrario cada valor en rem saldrá un 60% pequeño.
- Consejo 3: Evita vw en el texto corrido. Un tamaño que se lee bien a 1920px resulta ilegible a 360px, así que recurre a clamp() con un mínimo en rem y comprueba ambos anchos en los campos de arriba.
- Consejo 4: ¿Montas un sistema de diseño? Combina esta página con la regla online para validar tamaños físicos y con el conversor de bases numéricas cuando necesites leer los valores hexadecimales de tus colores.