Conversor de PX a VW/VH gratuito
Convierte valores en píxeles a unidades de viewport (vw y vh) para que tus layouts escalen fluidamente con la pantalla. Introduce el ancho y alto del viewport de tu diseño, más el valor en píxeles que quieres convertir.
El tamaño estático suele expresarse mejor en rem: el Conversor de Px a Rem se encarga de eso, y CSS a Tailwind convierte cualquiera de las unidades en clases de utilidad.
Cómo usar PX a VW
- 1 Introduce el valor en píxeles y el ancho de viewport contra el que diseñas, a menudo el ancho de tu archivo de diseño.
- 2 Lee el equivalente en vw, y en vh contra el alto del viewport.
- 3 Copia el valor en tu hoja de estilos, o úsalo dentro de un clamp() para limitar cuánto puede crecer.
- 4 Ajusta el ancho de referencia para comprobar cómo se comporta el valor en otros breakpoints.
Cómo usarlo
Fija el tamaño de viewport al que apunta tu diseño (comúnmente 1440×900 o 1920×1080), escribe un valor en píxeles, y obtén el equivalente en vw/vh más la conversión inversa de vw a px.
- PX a VW y PX a VH
- VW/VH de vuelta a píxeles
- Tamaño de viewport de diseño configurable
- Preajustes de breakpoints comunes
- Copia el valor CSS
¿Qué son las unidades de viewport?
1vw equivale al 1% del ancho del viewport y 1vh al 1% del alto del viewport. Usarlas permite que el texto, el espaciado y los tamaños de elemento escalen suavemente con la pantalla en lugar de saltar entre breakpoints fijos. Usa clamp() con unidades de viewport para lo mejor de ambos mundos.
Preguntas frecuentes
¿Qué significa realmente 1vw?
El uno por ciento del ancho del viewport, así que el valor cambia al redimensionar la ventana. En un viewport de 1440px, 1vw son 14,4px; en un teléfono de 375px son 3,75px. Eso es lo que lo hace útil para tipografía y espaciado fluidos, y peligroso para cualquier cosa que deba quedarse fija.
¿Por qué usar vw causa scroll horizontal?
Porque 100vw incluye el ancho de la barra de scroll vertical, mientras que el área de contenido de la página no. Fijar un elemento a 100vw en una página que hace scroll vertical por tanto se desborda ligeramente. Usa 100% para los elementos de ancho completo, y reserva vw para valores de escala.
¿Cuándo debo usar clamp() con unidades de viewport?
Casi siempre. Un valor vw en bruto puede volverse ilegiblemente pequeño en un teléfono o absurdamente grande en un monitor ancho. clamp(1rem, 2.5vw, 2rem) da un escalado fluido entre un suelo y un techo, que es el patrón detrás de la mayoría de las escalas de tipografía fluidas modernas.
Conversores de unidades y datos relacionadas
También te puede interesar
Herramientas de otras categorías que suelen combinarse con PX a VW: