Share
Recientemente he visto que esto sucede algunas veces, por lo general en sitios web con navegación fija en el lado izquierdo. Tendrán diseños encantadores y fluidos, que se extienden en pantallas anchas y se apilan en dispositivos más pequeños, pero aún así se ven afectados por un punto de quiebre que pocas personas piensan. Estoy tomando sobre viewport altura.
Dejame darte un ejemplo. Aquí hay un diseño simple y sensible; Dos columnas que se comportan exactamente como usted esperaría. Haz que el navegador crezca y se reduzca y verás lo que quiero decir..
Este diseño comienza con el móvil primero, con los dos divs apilados uno encima del otro. Luego se divide en columnas, con su columna izquierda fija, en pantallas con un ancho mínimo de 800 px.
Pantalla de medios y (ancho mínimo: 800 px)
El contenido principal se desplaza hacia arriba y hacia abajo, mientras que la primera columna permanece fija a la izquierda. Podemos ubicar una navegación en la columna de la izquierda, tal vez un avatar, ese tipo de cosas.
Todo parece estar bien, pero mira lo que sucede cuando encogemos nuestro navegador. verticalmente; La navegación se vuelve oculta e inaccesible..
En realidad, no conozco a nadie que navegue de esta manera, pero aún así, no podemos asumir que una pantalla ancha automáticamente significa pantalla alta también..
Las consultas de medios son capaces de identificar mucho más que el ancho de la página; pueden reaccionar a densidad de pixeles, orientación, si la pantalla es color o monocromo, la relación de aspecto, cargas de cosas.
En este caso podemos confiar en el sencillo min-height, agregando una segunda condición a nuestra consulta de medios existente:
Pantalla @media y (ancho mínimo: 800 px) y (mínimo altura: 500 px)
Ahora nuestra disposición de la columna fija a la izquierda solo tendrá efecto una vez que la pantalla sea más ancha que 800px y por lo menos 500px de altura. Echa un vistazo a la demo y ver por ti mismo..
No tenemos que alterar completamente el diseño para que nuestro menú sea accesible. En su lugar, podríamos agregar una barra de desplazamiento separada a la columna de navegación cuando la ventana gráfica no sea lo suficientemente alta como para revelarla, eche un vistazo.
Pantalla de @media y (altura máxima: 500 px) .col-first altura: 100%; desbordamiento: desplazamiento;
Se trata de resolver las cosas de la manera más adecuada..
Una ventana poco profunda realmente puede restringir lo que se ve en una página web. Eche un vistazo a cómo Gmail reduce el relleno de la tabla si hay menos espacio vertical:
Este ejemplo de Gmail demuestra que un punto de ruptura no tiene por qué significar que un diseño es roto, En lugar de verlo como una oportunidad para mejorar las cosas..
En cualquier caso, espero que esto haya reiterado la importancia de no asumir nada en lo que respecta a los puntos de quiebre. Háganos saber en los comentarios si alguna vez ha utilizado min-height consultas de medios, y para qué!
Accentsconagua