💻

Convertidor de px a vw y vh: unidades de viewport para CSS responsivo

Convierte un tamaño en píxeles a vw, vh, vmin y vmax para una pantalla concreta y ajusta tu CSS responsivo sin adivinar.

Tamaño

Ancho del viewport

Alto del viewport

Cargando calculadora…

Cómo funciona

vw = px ÷ ancho × 100 · vh = px ÷ alto × 100 · vmin = px ÷ mín(ancho, alto) × 100 · vmax = px ÷ máx(ancho, alto) × 100

Las unidades de viewport son porcentajes de la ventana del navegador: 1vw es el 1% del ancho, 1vh el 1% del alto, y vmin y vmax siguen al lado más corto o al más largo. Sirven para que la letra y los espacios crezcan de forma fluida con la pantalla en lugar de saltar en cada punto de corte. El detalle es que dependen de la ventana actual: un valor que se ve perfecto en un monitor de 1440 px puede quedar enorme en uno 4K o diminuto en un celular, por eso la tipografía fluida suele limitar el valor en vw con clamp().

Ejemplo resuelto

Luis tiene un título de 48 px en una pantalla de 1440 × 900. En vw es 48 ÷ 1440 × 100 = 3.333 vw y en vh es 48 ÷ 900 × 100 = 5.333 vh. Como 900 es el lado menor, vmin vale 5.333 y vmax vale 3.333. Si gira la pantalla a 900 × 1440, los valores se intercambian.

Preguntas frecuentes

¿Cuándo conviene usar vmin en vez de vw?

vmin escala con el lado más corto, así evita que los elementos cuadrados o a pantalla completa se desborden cuando el celular se pone horizontal. vw está bien para anchos que deben seguir específicamente el espacio horizontal.

¿Por qué 100vh da problemas en el celular?

Los navegadores móviles cuentan en 100vh el espacio que queda debajo de la barra de direcciones, así que una sección de altura completa se corta cuando la barra aparece o desaparece. Las unidades nuevas dvh, svh y lvh (alto dinámico, pequeño y grande) existen justo para resolver eso.

¿Cómo evito que un texto en vw se vuelva gigante?

Envuélvelo en clamp(mínimo, valor en vw, máximo), por ejemplo font-size: clamp(1rem, 3vw, 2rem). El navegador usa el valor en vw solo mientras quede entre el piso y el techo.

¿Cómo paso de px a vw?

Divide los píxeles entre el ancho de la pantalla y multiplica por 100. En una pantalla de 1440 px, 24 px son 24 ÷ 1440 × 100 = 1.667 vw.

Calculadoras relacionadas

Convertidor de px a rem y em

Convierte entre px, rem y em según el tamaño de fuente raíz y el del elemento padre. La misma cuenta que hace el navegador con las unidades de CSS.

Calculadora de ancho de columna en CSS Grid

Calcula el ancho exacto de cada columna de una retícula después de restar los gaps (gutters), para CSS Grid, filas con Flexbox y sistemas de diseño.

Calculadora de interlineado (line-height)

Convierte un line-height sin unidades en píxeles para cualquier tamaño de fuente, calcula el leading y ve el rango de interlineado cómodo para texto de lectura.

Calculadora de palabras por minuto

Calcula tu velocidad de escritura en palabras por minuto (PPM) a partir de los caracteres o palabras y el tiempo: PPM brutas y netas, precisión, caracteres por minuto y pulsaciones por hora, con la palabra estándar de 5 caracteres, tasa de errores, nivel de velocidad y el tiempo para escribir un documento.

Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.