Tenemos unidades de ventana gráfica (p. ej. vw, vh, vmin, vmax), y en su mayoría son bastante buenos. Es genial tener siempre una unidad disponible que sea relativa a toda la pantalla. Pero cuando le preguntas a la gente qué quieren arreglar en CSS, las unidades de ventana gráfica siempre están en la lista. El problema es que la gente los usa para hacer cosas como colocar botones importantes en la parte inferior de la pantalla de los dispositivos móviles. Haz algo así mal, te puede costar $8 millones de dólares.
Qué ocurre”? Bueno, asumiendo que 100vh es el área visible/utilizable en la ventana gráfica. ¿Qué? ¿No es ese el punto de esas unidades? Hay trucos así y así, pero por eso la gente no está contenta. Nada de eso es intuitivo y los grandes errores son muy comunes. Aunque Safari 15 mejorará un poco esto, diría que todavía no es particularmente intuitivo cómo debes manejarlo.
Bramus Van Damme cubre que la especificación ahora incluye algunos valores nuevos:
- La “Vista grande”:
lvh/lvw/lvmin/lvmax - La “ventana pequeña”:
svh/svw/svmin/svmax - La “ventana de oso bebé”
- La “Vista dinámica”:
dvh/dvw/dvmin/dvmax
Me parece que los dinámicos son los útiles, porque serán intuitivos: las unidades que representan el espacio utilizable actualmente, ya sea grande o pequeño.
La ventana gráfica dinámica tiene el tamaño de la ventana gráfica con *consideración dinámica de cualquier interfaz UA*. Se ajustará automáticamente en respuesta a los elementos de la interfaz UA que se muestren o no: el valor será cualquiera dentro de los límites de 100vh (máximo) y 100svh (mínimo).
Bramus Van Damme, “Las ventanas grandes, pequeñas y dinámicas”
Enlace directo →