Convertidor de px a vw
Convierte medidas en píxeles de una maqueta de diseño a unidades de viewport. Introduce el ancho y el alto de la mesa de trabajo para obtener vw, vh, vmin y vmax, convierte vw o vh de vuelta a píxeles y mira cómo se ve el valor en teléfonos, tabletas y computadoras de escritorio.
Última actualización:
Un valor, o varios separados por comas o espacios.
El ancho del diseño / mesa de trabajo
Cómo usar Convertidor de px a vw
- Elige la dirección: px a vw/vh, vw a px o vh a px.
- Introduce uno o más valores, como 24 o 16, 24, 48.
- Indica el tamaño de viewport para el que se hizo tu diseño, p. ej. 1440 × 900 o 375 × 812.
- Lee el resultado y revisa la tabla de breakpoints para ver cómo se escala en otras pantallas.
- Copia el valor CSS o descarga las tablas en CSV.
Fórmulas de las unidades de viewport
| Conversión | Fórmula | Ejemplo (1440 × 900) |
|---|---|---|
| px → vw | px ÷ ancho × 100 | 24px = 1.6667vw |
| vw → px | vw × ancho ÷ 100 | 5vw = 72px |
| px → vh | px ÷ alto × 100 | 90px = 10vh |
| vh → px | vh × alto ÷ 100 | 50vh = 450px |
| vmin / vmax | px ÷ mín/máx(ancho, alto) × 100 | 90px = 10vmin = 6.25vmax |
1vw en píxeles en los anchos de pantalla habituales
| Ancho del viewport | 1vw | 10vw | Dispositivo típico |
|---|---|---|---|
| 320px | 3.2px | 32px | Teléfono pequeño |
| 375px | 3.75px | 37.5px | Teléfono |
| 768px | 7.68px | 76.8px | Tableta en vertical |
| 1024px | 10.24px | 102.4px | Tableta en horizontal |
| 1440px | 14.4px | 144px | Escritorio |
| 1920px | 19.2px | 192px | Monitor Full HD |
Como vw se escala con la pantalla, un valor que se ve bien en tu maqueta de 1440px será 3.84 veces más pequeño en un teléfono de 375px. Revisa la tabla de breakpoints de arriba y usa clamp() para fijar límites.
Preguntas frecuentes
¿Cómo convierto px a vw?
Divide el valor en píxeles entre el ancho del viewport y multiplica por 100: vw = px ÷ ancho del viewport × 100. En un diseño de 1440px, 24px = 24 ÷ 1440 × 100 = 1.6667vw.
¿Cómo convierto vw a px?
Multiplica el valor en vw por el ancho del viewport y divide entre 100: px = vw × ancho ÷ 100. 5vw en una pantalla de 1440px de ancho son 72px, y en un teléfono de 375px son 18.75px.
¿Qué es 1vw?
1vw es el 1% del ancho del viewport. En una ventana del navegador de 1920px de ancho, 1vw = 19.2px; en un teléfono de 375px son 3.75px. 1vh es, del mismo modo, el 1% del alto del viewport.
¿Qué son vmin y vmax?
vmin es el 1% de la dimensión menor del viewport y vmax el 1% de la mayor. Son útiles para elementos que deben caber en pantalla tanto en vertical como en horizontal.
¿Debo usar vw para el tamaño de las fuentes?
Los tamaños de fuente solo en vw se vuelven diminutos en los teléfonos, enormes en monitores anchos y no crecen con el zoom del navegador. Combina vw con rem dentro de clamp() para fijar un mínimo y un máximo, por ejemplo clamp(1rem, 0.8rem + 1vw, 1.5rem).
¿100vw incluye la barra de desplazamiento?
Sí. En los navegadores de escritorio con barras de desplazamiento clásicas, 100vw incluye el ancho de la barra, así que width: 100vw puede provocar un pequeño desplazamiento horizontal. Usa width: 100% para bloques de ancho completo dentro de la página.
¿Y 100vh en móviles?
En los navegadores móviles, 100vh suele equivaler al viewport más grande, con la barra de direcciones oculta, así que el contenido puede quedar cortado. Las unidades más nuevas svh, lvh y dvh (alto de viewport pequeño, grande y dinámico) lo solucionan en los navegadores modernos.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.