Share
Jeg har sett dette skje et par ganger nylig, vanligvis på nettsteder med fast navigasjon som går ned på venstre side. De vil ha nydelige, flytende layouter som strekker seg ut på brede skjermbilder og stabler opp på mindre enheter, men de vil fortsatt falle på et sneaky breakpunkt som få folk tenker på. Jeg tar om viewport høyde.
La meg gi deg et eksempel. Her er en enkel responsiv layout; to kolonner som oppfører seg akkurat som du forventer. Gjør nettleseren vokse og krympe og du vil se hva jeg mener.
Denne utformingen begynner mobil først, med de to divene stablet oppe på hverandre. Det splittes så i kolonner, med sin faste venstre kolonne, på skjermbilder med en minimumsbredde på 800px.
@medias skjerm og (min bredde: 800px)
Hovedinnholdet ruller opp og ned, mens den første kolonnen forblir fast til venstre. Vi kan spalte en navigasjon i den venstre kolonnen, kanskje en avatar, den slags ting.
Alt ser bra ut, men se hva som skjer når vi krymper nettleseren vår vertikalt; navigasjonen blir skjult og utilgjengelig.
Jeg vet egentlig ikke om noen som blar slik som dette, men likevel kan vi ikke anta at en bred skjerm automatisk betyr høy skjerm også.
Medieforespørsler kan identifisere langt mer enn bare sidebredde; de kan reagere på pikseltetthet, orientering, om skjermen er farge eller monokrom, de størrelsesforholdet, laster av ting.
I dette tilfellet kan vi stole på rett frem min-høyde, ved å legge til en annen betingelse for vår eksisterende medieforespørsel:
@media skjerm og (min bredde: 800px) og (min høyde: 500px)
Nå er ordningen med fast-venstre-kolonne kun effekt når skjermen er bredere enn 800px og minst 500px høy. Sjekk ut demoen og se for deg selv.
Vi trenger ikke å endre layoutet helt for å gjøre menyen tilgjengelig. Vi kan i stedet legge til en egen rullefelt i navigasjonskolonnen når visningsporten ikke er høy nok til å avsløre alt, ta en titt.
@media skjerm og (maks høyde: 500px) .col-first høyde: 100%; overløp: bla;
Det handler om å løse ting på den mest hensiktsmessige måten.
En grunne viewport kan virkelig begrense det som er synlig på en nettside. Ta en titt på hvordan Gmail reduserer bordplaten hvis det er mindre vertikal eiendom:
Dette Gmail-eksemplet viser at et pause ikke trenger å bety at et oppsett er gått i stykker, i stedet se det som en mulighet til å forbedre ting.
I hvert fall håper jeg dette har gjentatt viktigheten av å ikke påta seg noe der bruddpunkter er opptatt av. Gi oss beskjed i kommentarene hvis du noen gang har brukt min-høyde media spørringer, og hva for!
Accentsconagua