Share
L'ho visto accadere alcune volte di recente, di solito su siti web con navigazione fissa in basso a sinistra. Avranno dei layout fluidi e piacevoli, che si estenderanno su schermi di grandi dimensioni e si accumuleranno su dispositivi più piccoli, ma continueranno a cadere in un punto di rottura subdolo a cui poche persone pensano. Sto prendendo il punto di vista altezza.
Lasciate che vi faccia un esempio. Ecco un semplice layout reattivo; due colonne che si comportano esattamente come ci si aspetterebbe. Fai crescere e riduci il browser e vedrai cosa intendo.
Questo layout inizia per primo cellulare, con i due div impilati uno sopra l'altro. Quindi si divide in colonne, con la sua colonna fissa sinistra, in schermi con una larghezza minima di 800 px.
@media screen e (min-width: 800px)
Il contenuto principale scorre su e giù, mentre la prima colonna rimane fissa a sinistra. Possiamo inserire una navigazione nella colonna di sinistra, forse un avatar, quel genere di cose.
Tutto sembra a posto, ma guarda cosa succede quando riduciamo il nostro browser verticalmente; la navigazione diventa nascosta e inaccessibile.
In realtà non conosco nessuno che naviga in questo modo, ma ancora, non possiamo presumere che un ampio schermo automaticamente significhi anche lo schermo alto.
Le query multimediali sono in grado di identificare molto più della semplice larghezza della pagina; possono reagire a densità di pixel, orientamento, se lo schermo è colore o monocromatico, il proporzioni, carichi di cose.
In questo caso possiamo fare affidamento sul semplice fatto min-height, aggiungendo una seconda condizione alla nostra query multimediale esistente:
@media screen e (min-width: 800px) e (min-height: 500px)
Ora la nostra disposizione di colonne fisse a sinistra diventerà effettiva solo quando lo schermo sarà più largo di 800 px e almeno 500 px di altezza. Guarda la demo e guarda di persona.
Non è necessario modificare completamente il layout per rendere accessibile il nostro menu. Potremmo invece aggiungere una barra di scorrimento separata alla colonna di navigazione quando il viewport non è abbastanza alto da rivelare tutto, dare un'occhiata.
@media screen e (max-height: 500px) .col-first height: 100%; overflow: scroll;
Si tratta di risolvere le cose nel modo più appropriato.
Una vista superficiale può davvero limitare ciò che è visibile su una pagina web. Dai un'occhiata a come Gmail riduce il riempimento della tabella se ci sono meno immobili verticali:
Questo esempio di Gmail dimostra che un punto di interruzione non deve necessariamente significare un layout rotto, invece vederlo come un'opportunità per migliorare le cose.
In ogni caso, spero che ciò abbia ribadito l'importanza di non assumere nulla per quanto riguarda i punti di rottura. Fateci sapere nei commenti se avete mai usato min-height media query, e per cosa!
Accentsconagua