Convertidor de unidades CSS
Convierte unidades CSS 1:1 entre px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex y ch en el navegador, con tamaño de fuente raíz, tamaño del padre, viewport, DPI y referencia de porcentaje.
Píxeles
px
Toca para cambiar la unidad
Unidades de longitud
Tipografía
Área visible
Porcentaje
Relativo al tamaño de fuente raíz
rem
Toca para cambiar la unidad
Unidades de longitud
Tipografía
Área visible
Porcentaje
Convertidor de unidades CSSIngresa un valor y elige la unidad de origenElige la unidad de destino o usa Intercambiar para invertirAjusta el contexto rem/em/%/vw/vh cuando haga faltaCopia el resultado convertidoCambia presets de viewport para revisar vw/vh
Inicio rápido
1
2
3
4
5
Escenarios comunes
Usos
maquetación responsive, paso de diseño a desarrollo, correspondencia densidad/impresión, convenciones de estilo unificadas
Consejos de uso
Base: 16px en raíz es común y facilita el cálculo mental rem ↔ px
Texto en rem: favorece el escalado global y la accesibilidad; em para escalado local en componentes
Usa unidades de viewport para estimar la maquetación: combínalas con breakpoints y restricciones min/max para evitar extremos.
Decimales y redondeo: mantén precisión razonable para no perder legibilidad
Parámetros y contexto
Base REM (Root Font Size): determina la conversión rem ↔ px. 16px es común en la web (1rem≈16px). Ajústala cuando la base del diseño sea distinta.
Base EM (Parent Font Size): determina em y % cuando la referencia es tamaño de fuente. Útil para el escalado local de componentes.
Referencia de %: elige Tamaño de fuente / Ancho / Alto según el contexto. Maquetación: ancho/alto; tipografía: tamaño de fuente.
Preajustes de breakpoint: móvil / tableta / escritorio / pantalla grande también fijan el viewport para estimar rápido. No es una media query en tiempo de ejecución.
Tamaño de viewport: se usa para vw/vh/vmin/vmax y % (ancho/alto). Los dispositivos reales varían por barras de direcciones, áreas seguras y barras de desplazamiento.
DPI (puntos por pulgada): se usa para unidades físicas pt/pc/in/cm/mm/q ↔ px. La estimación CSS predeterminada es 96 DPI; los valores personalizados son estimaciones de impresión/dispositivo, no el cálculo final de maquetación del navegador.
Consejos: 1) 16px y 96 DPI son bases comunes; 2) verifica los porcentajes de maquetación cambiando de breakpoint; 3) estos controles ayudan a estimar durante el diseño y no reemplazan el cálculo DOM/CSS final del navegador.
Limitaciones y compatibilidad
La referencia de % depende de la propiedad CSS, el bloque contenedor y el modo de maquetación; esta herramienta usa el tamaño de fuente, ancho de viewport o alto de viewport elegido para estimar, no una medición real del padre/contenedor.
ex/ch son aproximaciones basadas aquí en el tamaño de fuente del padre; los resultados no son una inspección de métricas de fuente y varían según fuentes y navegadores.
Los vw/vh/vmin/vmax clásicos varían con barras de desplazamiento, barras de direcciones y áreas seguras; esta herramienta no calcula dvh/svh/lvh, vi/vb, safe-area ni unidades de consulta de contenedor.
Las unidades físicas ↔ px usan la estimación de DPI configurada; el trabajo de impresión o HiDPI aún requiere validación en dispositivo o prueba.
Privacidad y seguridad
El procesamiento se ejecuta en el navegador. El valor de entrada, las unidades From/To, los valores guardados por unidad, el tamaño de fuente raíz, el tamaño de fuente padre, el viewport, el DPI, la referencia de porcentaje y la elección de breakpoint pueden permanecer en la sesión actual del navegador o en el almacenamiento del navegador. Si guardas un espacio de trabajo o activas la sincronización WebDAV, esos valores pueden guardarse según tu configuración de sincronización. Los resultados convertidos se recalculan desde el valor, las unidades y los ajustes de contexto actuales, y no se almacenan como resultados separados. Esta página no recupera URL ni envía valores para conversión del lado del servidor. En dispositivos compartidos, borra valores, ajustes y datos del sitio cuando sea necesario.
Preguntas frecuentes
rem depende de la fuente raíz (escalado global predecible); em depende del padre (ideal para escalado local)
Prioriza rem en maquetación y texto (a11y); px es apropiado para iconos/bordes nítidos
Las barras de direcciones móviles, áreas seguras y barras de desplazamiento afectan el viewport; combínalo con breakpoints y restricciones min/max.
Ajusta DPI (p. ej., 96/72/300). Pantalla→impresión aquí es estimativa; usa pruebas y flujos con ICC