Convierte unidades CSS — px, rem, em, vw, vh
Pasa de px a rem, em, vw, vh o % y viceversa. Indica el tamaño de fuente raíz y el ancho del viewport para que rem y unidades de viewport coincidan con tu diseño.
rem usa la fuente raíz; vw y % usan el ancho del viewport.
En Figma suele ir todo en px y en código en rem. Esta página une los dos sin abrir la calculadora.
vw y vh dependen del ancho de pantalla — pon el breakpoint que estés diseñando.
Cómo convertir
- Escribe el número y elige unidades de origen y destino
- Confirma fuente raíz y ancho del viewport
- Copia el resultado a tu CSS
Para qué sirve
- Evitar errores de rem cuando la raíz no es 16.
- Ver rápido cuántos px son 40vw en un layout de laptop.
- Sin cuenta — pegas y listo.
Casos de uso
- Espaciado en px del diseño → rem en CSS
- Comprobar 40vw en un mock de portátil
- Explicar rem vs em con números reales
Consejos
- em aquí usa el mismo tamaño padre que la raíz por simplicidad; ajústalo si el componente tiene otra fuente.
- Ida y vuelta puede dejar decimales raros — en CSS casi nunca hacen falta cuatro cifras.
Ejemplos
| Entrada | Salida | Nota |
|---|---|---|
| 16px → rem (raíz 16) | 1rem | — |
| 50vw con 1280px de ancho | 640px | — |
Preguntas frecuentes
- ¿En qué se basa rem?
- En el tamaño de fuente raíz que pongas aquí (suele ser 16px). Cámbialo si tu html { font-size } es distinto.
- ¿% es lo mismo que vw?
- No siempre. Aquí el % usa el mismo ancho de referencia que el campo viewport — trátalo como aproximación al ancho del contenedor.