Conversor de PX a VH Online
Convierte píxeles a altura de ventana (vh) al instante. Obtén valores CSS precisos para tu diseño responsivo, con solución incluida para problemas en móviles.
(100px ÷ 1080px) × 100 = 9.26vh
Altura del viewport en píxeles (p. ej., 1080px para escritorio)
Cómo convertir PX a VH: Guía rápida en 3 pasos
Convierte píxeles a vh al instante con nuestra calculadora. Perfecta para desarrolladores que necesitan valores precisos de altura de ventana en CSS para diseños responsivos.
Define la altura del viewport
Introduce la altura del viewport en píxeles. Valores comunes: 1080px (escritorio), 1024px (tablet) o 667px (móvil). Este valor determina cómo se calcula 1vh.
Ingresar valor en píxeles
Escribe el valor en píxeles que deseas convertir. El convertidor acepta números enteros y decimales para medidas precisas.
Obtener resultado en VH
El convertidor calcula al instante el valor en vh. Copia el resultado y úsalo en tu CSS para diseños responsivos basados en ventana gráfica.
¿Qué diferencia hay entre PX y VH en CSS?
Comprender cuándo usar píxeles (px) y cuándo usar altura de ventana (vh) es fundamental para crear diseños web responsivos. Te explicamos las diferencias clave y cuándo conviene convertir px a vh.
¿Qué son los píxeles (PX)?
Unidad de tamaño fijo
Los píxeles son unidades absolutas que mantienen el mismo tamaño independientemente del tamaño de la ventana. 100px siempre es 100px.
Flexibilidad limitada
Las alturas basadas en píxeles no se adaptan a diferentes tamaños de pantalla, lo que hace que el diseño responsivo sea más desafiante.
Casos de uso ideales
Ideal para bordes, elementos de altura fija y diseños donde se requiere un control preciso.
¿Qué son las unidades de altura de ventana (VH)?
Relativo al viewport
1vh equivale al 1% de la altura del viewport. En una pantalla de 1080px, 1vh = 10.8px. El tamaño se ajusta automáticamente según la ventana.
Verdaderamente responsivo
Las unidades VH se ajustan automáticamente según el tamaño de la pantalla, perfecto para secciones de pantalla completa y diseños que se escalan proporcionalmente.
Beneficios del diseño responsivo
Los diseños basados en VH se escalan sin problemas en todos los tamaños de dispositivos, desde móviles hasta monitores de altura ultra.
Fórmula para convertir píxeles a VH
vh = (Píxeles ÷ Altura del viewport) × 100
Donde la altura del viewport es la altura visible de la ventana del navegador en píxeles
Ejemplo: 100px ÷ 1080px × 100 = 9.26vh
Ejemplo: 50px ÷ 1080px × 100 = 4.63vh
Ejemplo: 200px ÷ 1080px × 100 = 18.52vh
Ejemplo de cálculo paso a paso
Paso 1: Identificar valor en píxeles → 150px
Paso 2: Identificar altura de ventana → 1080px
Paso 3: Dividir píxeles entre altura de ventana → 150 ÷ 1080 = 0.1389
Paso 4: Multiplicar por 100 → 0.1389 × 100 = 13.89vh
Resultado: 150px = 13.89vh en una ventana de 1080px
Tabla de conversión PX a VH: Valores comunes
Consulta rápida de conversiones px a vh más usadas. Encuentra al instante el valor de altura de ventana que necesitas para diferentes tamaños de viewport sin necesidad de calcular.
Escritorio: 1080px
| Píxeles | VH |
|---|---|
| 50px | 4.63vh |
| 100px | 9.26vh |
| 150px | 13.89vh |
| 200px | 18.52vh |
| 300px | 27.78vh |
| 400px | 37.04vh |
Tableta: 1024px
| Píxeles | VH |
|---|---|
| 50px | 4.88vh |
| 100px | 9.77vh |
| 150px | 14.65vh |
| 200px | 19.53vh |
| 300px | 29.30vh |
| 400px | 39.06vh |
Móvil: 667px
| Píxeles | VH |
|---|---|
| 20px | 3.00vh |
| 50px | 7.50vh |
| 100px | 14.99vh |
| 150px | 22.49vh |
| 200px | 29.99vh |
| 300px | 44.98vh |
💡Consejo útil: Uso de tablas de conversión
Estas tablas de referencia son perfectas para búsquedas rápidas al construir diseños responsivos. Recuerda que los valores en vh siempre son relativos a la altura del viewport: elige la tabla que coincida con el tamaño de dispositivo objetivo. Para valores personalizados, utiliza el convertidor arriba.
Ejemplos prácticos: Cómo usar VH en tu CSS
Aprende con ejemplos de código real cómo aplicar la conversión de px a vh en tus proyectos. Casos de uso comunes listos para copiar y adaptar a tu diseño responsivo.
Antes: Altura fija (píxeles)
.hero-section {
min-height: 600px;
padding: 80px 20px;
}
.hero-title {
font-size: 48px;
margin-bottom: 24px;
}
.card {
height: 300px;
padding: 20px;
}Este diseño con altura fija no se adapta al viewport y puede verse desproporcionado en diferentes tamaños de pantalla.
Después: Responsivo (unidades VH)
.hero-section {
min-height: 55.56vh;
padding: 7.41vh 1.04vw;
}
.hero-title {
font-size: 4.44vh;
margin-bottom: 2.22vh;
}
.card {
height: 27.78vh;
padding: 1.85vh;
}Este diseño responsivo se adapta al viewport, ofreciendo una experiencia visual consistente en todos los tamaños de pantalla.
Secciones de pantalla completa
/* Ventana de escritorio: 1080px */
.hero {
height: 100vh; /* Pantalla completa */
}
.section {
min-height: 50vh; /* Media pantalla */
}
.banner {
height: 33.33vh; /* Un tercio de pantalla */
}Las secciones de altura completa se adaptan perfectamente a cualquier dispositivo, creando experiencias visuales impactantes.
Sistema de espaciado vertical fluido
/* Basado en ventana de 1080px */
.section {
padding-top: 9.26vh; /* 100px */
padding-bottom: 9.26vh; /* 100px */
}
.card-stack {
gap: 3.70vh; /* 40px */
}
.button {
padding: 1.48vh 2.08vw; /* 16px 40px */
}El espaciado vertical se ajusta proporcionalmente, manteniendo un ritmo visual consistente en diferentes alturas de viewport.
⚠️Errores comunes a evitar
Usar VH para elementos pequeños
Evita usar vh para bordes, iconos o pequeños elementos de interfaz que deben mantenerse consistentes. Utiliza píxeles o rem en su lugar.
Sin restricciones de mín/máx
Utiliza siempre las funciones min() o max() para evitar que los elementos sean demasiado grandes o pequeños: height: min(50vh, 600px)
Problemas de barra de direcciones en móviles
En dispositivos móviles, la barra de direcciones puede afectar a 100vh. Utiliza dvh (altura de viewport dinámica) o ajusta con JavaScript para obtener la altura real de pantalla.
Contenido que desborda verticalmente
Ten cuidado con height: 100vh en secciones con mucho contenido. Usa min-height: 100vh para permitir que el contenido se expanda.
Cómo solucionar problemas de 100vh en móvil
¿Tienes problemas con 100vh en dispositivos móviles por la barra de direcciones? Descubre soluciones modernas con dvh, clamp() y otras técnicas CSS para crear diseños de altura completa que funcionen perfectamente en todos los dispositivos.
🎯 Función clamp() - Mejor práctica
La función clamp() establece un valor mínimo, preferido y máximo. Esto garantiza que los elementos nunca sean demasiado pequeños ni demasiado grandes, creando diseños adaptables y consistentes.
/* Altura responsiva con límites */
.hero {
height: clamp(400px, 55.56vh, 800px);
/* mín: 400px, preferido: 55.56vh, máx: 800px */
}
.section {
min-height: clamp(300px, 40vh, 600px);
/* Se escala entre 300px y 600px */
}
.card {
height: clamp(200px, 27.78vh, 400px);
/* Altura responsiva con restricciones */
}✓ Ventaja del diseño: Los elementos mantienen proporciones ideales en cualquier dispositivo, evitando secciones demasiado altas o comprimidas.
⚡ Funciones min() y max()
Utiliza min() para limitar la altura máxima y max() para establecer una altura mínima. Ideal para evitar que las secciones sean demasiado altas en pantallas grandes o comprimidas en móviles.
/* Nunca más alto que 800px */
.hero {
height: min(80vh, 800px);
}
/* Nunca más bajo que 400px */
.section {
min-height: max(50vh, 400px);
}
/* Altura responsiva con límite máximo */
.card {
height: min(40vh, 500px);
/* Ocupa el 40% de la ventana pero nunca excede 500px */
}💡 Consejo profesional: Combina min() y max() con calc() para tener aún más control sobre el dimensionamiento vertical responsivo.
🔧 Solución definitiva: Barra de direcciones móvil
El problema más común con 100vh: en dispositivos móviles, incluye la barra de direcciones del navegador y causa desbordamiento. Prueba estas 4 soluciones efectivas:
/* Solución 1: Usar dvh (altura de ventana dinámica) */
.full-height {
height: 100dvh; /* Excluye la barra de direcciones */
}
/* Solución 2: Usar min-height en lugar de height */
.hero {
min-height: 100vh; /* Permite expansión */
}
/* Solución 3: Combinar svh y lvh */
.adaptive-height {
height: 100svh; /* Small viewport height */
}
/* Solución 4: Usar variable CSS con JavaScript */
:root {
--vh: 1vh; /* Actualizar con JS */
}
.section {
height: calc(var(--vh, 1vh) * 100);
}Nota: dvh, svh y lvh son unidades de ventana más nuevas que manejan mejor las barras de UI móviles, pero verifica la compatibilidad con navegadores antes de usarlas.
🎨 Secciones de pantalla completa perfectas
Crea secciones hero y banners de pantalla completa que funcionen perfectamente en todos los dispositivos, incluyendo móviles con barras de UI.
/* Enfoque moderno para pantalla completa */
.hero-full {
min-height: 100vh;
min-height: 100dvh; /* Navegadores modernos */
}
/* Hero adaptativo con límites */
.hero-adaptive {
height: clamp(500px, 100vh, 1200px);
}
/* Sección dividida verticalmente */
.split-section {
height: 50vh;
height: 50dvh; /* Mitad real de pantalla */
}
/* Con soporte para navegadores antiguos */
@supports (height: 100dvh) {
.modern-hero {
height: 100dvh;
}
}📱 Compatibilidad móvil: Este enfoque garantiza que tus secciones de pantalla completa se vean perfectas en dispositivos móviles.
Comparación rápida: Cuándo usar cada enfoque
| Método | Mejor para | Móvil | Compatibilidad |
|---|---|---|---|
| VH puro | Secciones hero, diseños de altura completa | ⚠ Problemas con barra de UI | ✓ Excelente |
| clamp() | Alturas adaptativas, espaciado vertical | ✓ Excelente | ✓ Buena (no IE) |
| min()/max() | Restringir alturas, prevenir desbordamiento | ✓ Buena | ✓ Buena (no IE) |
| min-height | Secciones con contenido variable | ✓ Excelente | ✓ Excelente |
| dvh/svh/lvh | Proyectos modernos, altura real móvil | ✓ Excelente | ⚠ Limitada (navegadores recientes) |
¿Cuándo usar VH y cuándo usar PX en CSS?
Saber cuándo usar píxeles y cuándo altura de ventana es clave para un diseño web efectivo. Aprende cuándo conviene convertir px a vh y cuándo es mejor mantener valores fijos en píxeles.
Usar unidades VH para:
- ✓Secciones de héroe y banners de pantalla completa
- ✓Diseños que ocupan todo el alto de la ventana
- ✓Espaciado vertical fluido y sistemas de padding
- ✓Elementos que deben mantener proporciones verticales
- ✓Páginas de una sola pantalla sin desplazamiento
Usar píxeles para:
- •Bordes y anchos de borde
- •Sombras de caja y estilos de contorno
- •Iconos y pequeños elementos de interfaz
- •Puntos de corte de consultas de medios
- •Elementos que requieren dimensionamiento preciso y consistente
Preguntas frecuentes: Todo sobre convertir PX a VH
Resuelve tus dudas sobre la conversión de píxeles a altura de ventana. Desde problemas en móviles hasta mejores prácticas de CSS responsivo, aquí encontrarás respuestas claras a las preguntas más comunes.
¿Cómo se calcula la conversión de píxeles a VH?
Para convertir px a vh manualmente, usa esta fórmula: vh = (píxeles ÷ altura del viewport) × 100. Ejemplo práctico: si quieres convertir 100px en una ventana de 1080px de alto: 100 ÷ 1080 × 100 = 9.26vh. Con nuestra calculadora obtienes el resultado al instante sin necesidad de hacer cálculos.
¿Qué altura de viewport debo usar para la conversión?
La altura del viewport depende del objetivo de tu diseño. Los valores comunes son 1080px para diseños de escritorio, 1024px para tabletas y 667px para dispositivos móviles. Elige el tamaño de viewport que coincida con tu punto de corte de diseño principal. Muchos diseñadores utilizan 1080px como base para diseños dirigidos a escritorio.
¿Cuál es la diferencia entre VH y porcentaje de altura?
VH siempre es relativo a la altura del viewport (la ventana del navegador), mientras que el porcentaje de altura es relativo a la altura del contenedor padre. Utiliza vh para elementos que deben ajustarse con toda la altura de la ventana, como secciones hero de pantalla completa. Utiliza porcentaje para elementos que deben escalarse relativos a su contenedor padre. Importante: el porcentaje de altura requiere que el padre tenga una altura definida.
¿Cómo soluciono el problema de 100vh en dispositivos móviles?
Este es el problema más frecuente: en dispositivos móviles, 100vh incluye la barra de direcciones, causando desbordamiento cuando esta se oculta. Soluciones probadas: 1) Utilizar 100dvh (altura de viewport dinámica) en navegadores modernos - se ajusta automáticamente, 2) Cambiar height: 100vh por min-height: 100vh para permitir expansión, 3) Usar 100svh que considera la barra visible, o 4) Implementar una solución con JavaScript y variables CSS para calcular la altura real del viewport.
¿Puedo combinar VH con otras unidades CSS?
Sí, puedes combinar vh con otras unidades usando calc(). Ejemplos: height: calc(100vh - 80px) para restar la altura de un header fijo, padding: calc(2rem + 5vh) para combinar espaciado fijo y fluido, o min-height: calc(50vh + 200px) para garantizar una altura mínima. Esto te da flexibilidad para crear diseños complejos y adaptativos.
¿Cuál es la diferencia entre vh, dvh, svh y lvh?
Todas son unidades de altura de ventana con comportamientos diferentes: vh (altura de ventana) es la unidad original - 1vh = 1% de la altura de ventana. dvh (altura de ventana dinámica) se ajusta cuando aparecen/desaparecen barras de UI móviles. svh (altura de ventana pequeña) asume que la UI es visible (estado más pequeño, más estable). lvh (altura de ventana grande) asume que la UI está oculta (estado más grande). Para compatibilidad móvil moderna, usa dvh o svh.
¿Debo usar height o min-height con VH?
Depende de tu caso de uso. Usa height: 100vh cuando quieras una altura exacta (puede causar desbordamiento si hay mucho contenido). Usa min-height: 100vh cuando quieras que la sección ocupe al menos la pantalla completa pero pueda crecer con el contenido (recomendado para la mayoría de casos). Para más control, usa clamp(): height: clamp(500px, 100vh, 1200px) establece límites mínimos y máximos.
¿Cómo hago una sección a pantalla completa que funcione en móvil?
Para crear secciones hero o banners de altura completa compatibles con todos los dispositivos, usa este código: .hero { min-height: 100vh; min-height: 100dvh; }. La primera línea sirve como respaldo para navegadores antiguos, la segunda usa la unidad moderna dvh que funciona perfectamente en móviles. Alternativa con mejor compatibilidad: .hero { min-height: 100vh; } @supports (min-height: 100dvh) { .hero { min-height: 100dvh; } }. Usar min-height en lugar de height permite que el contenido se expanda cuando sea necesario.
¿Debo usar VH para espaciado vertical?
VH puede funcionar para espaciado vertical en diseños de página completa, pero úsalo con cuidado. Para espaciado interno (padding/margin), considera combinar vh con unidades fijas: padding: calc(2rem + 3vh) proporciona una base consistente más escalado adaptativo. Para espaciado entre secciones grandes, vh puro puede funcionar bien: margin-bottom: 10vh. Para elementos pequeños y espaciado de texto, usa rem o em en su lugar para mejor control y accesibilidad.
¿Cómo manejo el desbordamiento vertical con VH?
Para prevenir problemas de desbordamiento vertical con vh: 1) Usa min-height en lugar de height para permitir expansión, 2) Combina con overflow-y: auto para agregar scroll cuando sea necesario: .section { height: 100vh; overflow-y: auto; }, 3) Usa max-height con vh para limitar la altura pero permitir contenido más pequeño: max-height: 80vh, o 4) Implementa un diseño flex o grid que maneje el desbordamiento automáticamente.
¿Puedo usar VH para diseños multi-sección verticales?
Sí, vh es perfecto para diseños de desplazamiento vertical donde cada sección ocupa la altura completa de la pantalla. Ejemplo: .section { min-height: 100vh; scroll-snap-align: start; } .container { scroll-snap-type: y mandatory; overflow-y: scroll; }. Esto crea un efecto de desplazamiento por secciones donde cada una ocupa la pantalla completa. Combínalo con scroll-snap para una experiencia de usuario fluida. Para móviles, considera usar 100dvh o 100svh para mejor manejo de barras de UI.