§ CALCULADORA · CSS
Conversor de unidades CSS
Convierte entre px, em, rem, %, vh, vw, vmin y vmax con referencias de viewport y contenedor. Útil para entender qué pasa con tu CSS en distintos tamaños.
Cómo funciona
Primero convertimos el valor origen a píxeles usando las referencias indicadas. Luego, desde ese valor en píxeles, calculamos las equivalencias en cada otra unidad usando la misma referencia. Las unidades dependientes del contexto (em, %, vh, vw) cambian su resultado si modificas las referencias.
Las equivalencias son matemáticas: el navegador real puede aplicar rounding subpixel o snapping diferente según motor y zoom. Para casos críticos verifica en DevTools.
Preguntas frecuentes
¿Cuándo usar vh vs %?
vh se calcula respecto al viewport visible del navegador, sin importar dónde estés en el documento. % se calcula respecto al contenedor padre. Para hero sections que ocupan la altura de la ventana usa vh; para hijos que dependen de su contenedor usa %.
¿em vs rem?
rem siempre se calcula respecto al font-size del elemento html raíz, así que es predecible. em se calcula respecto al font-size del elemento actual, así que se acumula en jerarquía. Para escalado consistente prefiere rem; para escalado relativo a un componente específico usa em.
¿Qué pasa con vh en móvil con barra de URL dinámica?
En navegadores móviles modernos las unidades vh están definidas como la viewport "grande" sin la barra de URL retraída, lo que provoca jumps al hacer scroll. Las unidades nuevas svh, lvh y dvh resuelven esto. Esta calculadora trabaja con vh clásico.
¿% relativo a qué exactamente?
Depende de la propiedad: width % se calcula sobre el ancho del contenedor padre, height % sobre el alto del contenedor padre, font-size % sobre el font-size del padre. Para evitar sorpresas, define unidades absolutas o vh/vw en raíces de layout.
¿Quieres explorar patterns y backgrounds CSS en distintas unidades? Abrir aGo Patterns
¿Tu equipo construye design systems con tokens responsivos a escala? aGo lab implementa sistemas que mantienen consistencia entre breakpoints. Conversemos.