Cuando vea este título, puede pensar que hay otro error tipográfico: ¿diseño de altura receptivo? ¿Hablas en serio? Porque el "diseño web responsivo" normalmente verifica los navegadores en múltiples anchos y tamaños de dispositivos. Generalmente ajustamos la capacidad de respuesta horizontal reduciendo el ancho, pero rara vez veo que se considere la capacidad de respuesta vertical reduciendo la altura del navegador. En este momento, Zhimimi puede tener una ligera fluctuación en su corazón y tiene algunas preguntas: ¿Necesitamos bajar la altura del navegador? Sí, sigamos hablando de ello.
Cuando diseñamos un sitio web, no es bueno hacer suposiciones sin basarnos en datos reales. La responsabilidad de las pruebas horizontales y verticales también es muy importante.
Para un diseñador, una suposición irrazonable es uno de los factores importantes que arruina el diseño de un sitio web. Por ejemplo, es incorrecto suponer que los usuarios deben navegar por un sitio web utilizando todo el ancho y alto de la pantalla. En lugar de ello, debemos considerar el peor de los casos.
Zhimi, ¿entiendes? La realidad es que no todos los usuarios utilizan los navegadores como esperamos. Encuentro que el sitio web se ve terrible cuando bajo la altura del navegador.
Cambiar el tamaño del navegador (verticalmente) no es la única forma de cambiar la altura de la ventana gráfica. Cuando abrimos el navegador DevTools, también ocupará la altura del navegador.
El área de flecha en la imagen de arriba representa la altura de la ventana gráfica actual. Para pantallas de portátiles más pequeñas, solo veremos una pequeña parte de la página web.
La verdadera pregunta es: ¿podemos mejorar la experiencia del usuario cuando la altura de la ventana gráfica es menor? Sí, es posible, echemos un vistazo.
Como diseñadores y desarrolladores, algunos de nosotros sólo nos centramos en los cambios de ancho del diseño e ignoramos los cambios de altura de la ventana gráfica. Por ejemplo, en desarrollo, la interfaz de usuario proporciona variaciones de componentes específicos en diferentes anchos de ventana gráfica. Pero ¿qué pasa con las diferentes alturas de las ventanas gráficas?
En la imagen de arriba, tenemos un menú de navegación que se ajusta según la altura de la ventana gráfica. . Si el tamaño de la ventana gráfica es pequeño (por ejemplo, iPhone 5), los elementos de navegación aparecerán como una cuadrícula de dos columnas. Esta forma de pensar a menudo se abandona u optimiza hasta que alguien dice que debería hacerse.
Hay dos formas diferentes de lograr los requisitos anteriores en CSS:
Consultas de medios verticales Unidades ViewportZhimimi definitivamente sabe cómo utilizar consultas de medios de ancho en CSS.
@media (ancho mínimo: 700px) { .element { /* hacer algo... */ }}Menos utilizada es la consulta de medios vertical, que comprueba la altura de la ventana gráfica.
@media (altura mínima: 500 px) { .element { /* hacer algo... */ }}/* o */@media (orientación: horizontal) { .element { /* hacer algo... */ }}El uso de unidades de ventana gráfica puede ayudar a brindar una mejor experiencia a los usuarios. Por ejemplo, controle el espacio vertical entre elementos según la altura de la ventana gráfica.
.hero__title { margen inferior: calc(10px + 5vh);}
Como se muestra arriba, para pantallas más grandes (como la iMac de 27 pulgadas), el margen inferior será muy grande. Tenemos dos formas de solucionar el problema de los márgenes excesivos.
Consultas de mediosFunción de comparación CSSLa primera forma (consultas de medios) es más compatible. Si la pantalla es grande, debemos establecer un valor máximo para el margen inferior.
@media (ancho mínimo: 2200 px) { .hero__title { margen inferior: 40 px }}Otro método es utilizar la función de comparación CSS Clamp(). La función de la función Clamp() es devolver un rango de valores.
.hero__title { margen inferior: abrazadera (10px, 5vh, 40px);}En este ejemplo, hay un área de sección con secciones para títulos e ilustraciones, y la altura de la sección es igual al 100% de la altura de la ventana gráfica.
Todo se ve bien hasta que la altura de la ventana gráfica se reduce. La altura de la sección no será suficiente para acomodar las ilustraciones y el contenido del texto. Por lo tanto, se superpondrá a otras partes de la página.
Observe cómo la ilustración se superpone a la sección siguiente. Esto sucede porque hay suficiente espacio vertical. Eche un vistazo a HTML y CSS.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- contenido --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>CSS
.hero {altura: 100vh;}.hero__thumb {flexionar: 0 0 550px ancho: 550px;}Aquí hay varias soluciones para resolver tales problemas:
Establece un tamaño fijo (ancho y alto) para la ilustración en lugar de solo el ancho, la falta de alto seguirá teniendo este problema. altura: 100vh solo si la altura de la ventana gráfica es mayor que 700 px (el valor de la consulta de medios puede variar según el contexto).Podemos combinar los dos para obtener una solución más poderosa.
.hero__thumb { ancho: 400px; alto: 300px; ajuste de objeto: contiene /* Para evitar comprimir la imagen */}@media (min-height: 700px) { .hero { alto: 100vh;Bien, ahora estamos de acuerdo en que es mejor utilizar consultas de medios verticales. Sin embargo, usar 100vh es arriesgado porque aunque limitemos el tamaño de la ilustración, es posible que no podamos hacer lo mismo con el contenido del texto. Si el contenido del texto se vuelve más largo, volverá a ocurrir el mismo problema; consulte la siguiente figura:
Para resolver este problema, podemos usar min-height en lugar de height. De esta manera, si el contenido se hace más largo, la altura se expandirá y no se superpondrá.
@media (altura mínima: 700 px) { .hero { altura mínima: 100 vh }}Fijar el título mientras se desplaza no es malo; sin embargo, queremos asegurarnos de fijar el título solo cuando el espacio vertical sea lo suficientemente bueno para que la experiencia sea buena.
Este es un sitio web sobre paisajes. Aquí podemos ver que cuando la altura es demasiado pequeña, la altura fija ocupará mucho espacio en su conjunto. ¿Es esto realmente importante para los usuarios? En la mayoría de los casos no es importante, porque el usuario promedio no se alejará para ver un sitio web como este. Actualmente, si queremos optimizar, podemos hacerlo. La idea es utilizar la consulta de medios vertical para cambiar el posicionamiento fijo al posicionamiento estático cuando se considera que la altura es menor que una determinada altura.
@media (altura mínima: 700 px) { .site-header { /* posición: fija o posición: fija */ }}Noté este patrón en la barra de navegación de Twitter.com. La idea es combinar consultas de medios verticales con el patrón Priority+.
Cuando se cambia el tamaño de la altura de la ventana gráfica, los elementos menos importantes (marcadores y listas) se eliminan y se agregan al menú Más, lo cual es un buen caso de uso para consultas de medios verticales.
.nav__item--secundario { mostrar: ninguno;}@media (altura mínima: 700px) { .nav__item--secundario { mostrar: bloquear }}Si nuestro sitio web tiene una barra lateral o una barra lateral, cuando la altura de la ventana gráfica es pequeña, podemos reducir el espacio vertical entre algunos elementos de navegación, lo que también mejorará el diseño general.
Sabemos que el cuadro modal debe estar al menos centrado horizontalmente. Sin embargo, en ocasiones también necesitamos centrarlo verticalmente. Generalmente utilizamos la siguiente solución:
.modal__body { posición: absoluta; izquierda: 50%; arriba: 50%; transformar (-50%, -50%);
Sin embargo, existe un problema cuando el contenido se vuelve largo, el modal llenará la pantalla verticalmente y el usuario no podrá desplazarse por él.
Hay varias razones para esta situación:
El cuadro modal no tiene altura y el modal está centrado verticalmente (esto hará que el problema ocurra más rápido)Aquí está el CSS reparado:
.modal__body {posición: absoluta; izquierda: 50%; arriba: 3rem; transformar: traducirX (-50%); ancho: 500px; altura máxima: 500px; (altura mínima: 700 px) { .modal__body { arriba: 50%; transformar: traducir (-50%, -50%);Tenga en cuenta que utilicé altura mínima y altura máxima. min-height trata de mantener el modal con buen aspecto incluso si el contenido es corto, max-height trata de limitar su altura usando un valor específico en lugar de agregar una altura fija.
Al diseñar una experiencia, es mejor pensar en términos de ancho y alto. Cambiar el tamaño de su navegador verticalmente puede resultar un poco extraño, pero tiene sus ventajas. En este artículo, analizamos la importancia de las pruebas verticales y cómo las realizamos. Finalmente, proponemos algunos ejemplos y casos de uso que esperamos sean útiles para los usuarios de smartmi.
Lo anterior trata sobre el diseño de altura en páginas web responsivas. ¿Es necesario reducir la altura del navegador? Para obtener más detalles, preste atención a otros artículos relacionados en este sitio.