Share
Ik heb dit een paar keer kort geleden gezien, meestal op websites met een vaste navigatie aan de linkerkant. Ze zullen mooie, vloeiende lay-outs hebben, die zich uitstrekken over brede schermen en op kleinere apparaten opstapelen, maar ze zullen nog steeds bevuild raken van een stiekem breekpunt waar weinig mensen aan denken. Ik neem een kijkvenster hoogte.
Laat me je een voorbeeld geven. Hier is een eenvoudige responsieve lay-out; twee kolommen die zich precies gedragen zoals u zou verwachten. Laat de browser groeien en krimpen en je zult zien wat ik bedoel.
Deze lay-out begint het eerst met mobiel, met de twee div's op elkaar gestapeld. Het splitst zich vervolgens in kolommen, met zijn vaste linkerkolom, op schermen met een minimale breedte van 800 px.
@media-scherm en (min-breedte: 800px)
De hoofdinhoud schuift op en neer, terwijl de eerste kolom links blijft staan. We kunnen een navigatie glijden in de linkerkolom, misschien een avatar, zoiets.
Alles lijkt in orde, maar kijk eens wat er gebeurt als we onze browser verkleinen verticaal; de navigatie wordt verborgen en ontoegankelijk.
Ik ken eigenlijk niemand die zo doorzoekt, maar toch kunnen we niet aannemen dat een breed scherm automatisch ook een hoog scherm betekent.
Mediaquery's kunnen veel meer identificeren dan alleen paginabreedte; ze kunnen reageren pixel dichtheid, oriëntering, of het scherm is kleur of monochroom, de beeldverhouding, massa van dingen.
In dit geval kunnen we vertrouwen op de ongecompliceerde min-height, door een tweede voorwaarde toe te voegen aan onze bestaande media-query:
@media-scherm en (min-breedte: 800px) en (min-hoogte: 500px)
Nu zal onze fixed-left-column opstelling alleen effect hebben als het scherm breder is dan 800px en minstens 500px hoog. Bekijk de demo en ontdek het zelf.
We hoeven de lay-out niet volledig te wijzigen om ons menu toegankelijk te maken. In plaats daarvan kunnen we een aparte schuifbalk toevoegen aan de navigatiekolom wanneer het kijkvenster niet hoog genoeg is om alles te onthullen, kijk maar.
@media-scherm en (max-hoogte: 500px) .col-first height: 100%; overloop: scrollen;
Het gaat erom de dingen op de meest geschikte manier op te lossen.
Een ondiep venster kan echt beperken wat zichtbaar is op een webpagina. Bekijk hoe Gmail de tabelvulling vermindert als er minder verticaal onroerend goed is:
Dit Gmail-voorbeeld bewijst dat een breekpunt niet hoeft te betekenen dat een lay-out dat is gebroken, Zie het in plaats daarvan als een kans om dingen te verbeteren.
In elk geval hoop ik dat dit opnieuw het belang heeft benadrukt van het niet aannemen van iets als het om onderbrekingspunten gaat. Laat het ons weten in de comments als je ooit hebt gebruikt min-height mediaquery's en waarvoor!
Accentsconagua