Share
Jag har sett detta hända några gånger nyligen, vanligtvis på webbplatser med fast navigering som går ner till vänster. De kommer att ha fina, flytande layouter, som sträcker sig ut på breda skärmar och staplar upp på mindre enheter, men de kommer fortfarande att falla fula av en snygg brytpunkt som få människor tänker på. Jag tar om viewport höjd.
Låt mig ge dig ett exempel. Här är en enkel responsiv layout; två kolumner som beter sig exakt som du förväntar dig. Gör webbläsaren växa och krympa och du ser vad jag menar.
Denna layout börjar mobil först, med de två delarna staplade upp ovanpå varandra. Den splittrar sedan i kolumner, med sin fasta vänstra kolumn, på skärmar med en minsta bredd på 800px.
@medias skärm och (min bredd: 800px)
Huvudinnehållet rullar upp och ner, medan den första kolumnen är kvar till vänster. Vi kan spåra en navigering i den vänstra kolumnen, kanske en avatar, den typen av sak.
Allt verkar bra, men se vad som händer när vi krymper webbläsaren vertikalt; navigeringen blir dold och oåtkomlig.
Jag vet faktiskt inte om någon som bläddrar så här, men ändå kan vi inte anta att en bredbildsskärm automatiskt betyder lång skärm också.
Mediafrågor kan identifiera långt mer än bara sidbredd; de kan reagera på pixel densitet, orientering, huruvida skärmen är Färg eller svartvit, de bildförhållande, massor av saker.
I det här fallet kan vi lita på rakt framåt min-höjd, genom att lägga till ett andra villkor för vår befintliga mediefråga:
@media skärm och (min bredd: 800px) och (minhöjd: 500px)
Nu gäller det att vår ordning med fasta vänster kolumner bara träder i kraft när skärmen är större än 800px och minst 500px hög. Kolla in demoen och se själv.
Vi behöver inte helt ändra layouten för att göra vår meny tillgänglig. Vi kan istället lägga till en separat rullningsrad i navigeringskolonnen när visningsporten inte är tillräckligt hög för att avslöja allt, ta en titt.
@media-skärmen och (maxhöjd: 500px) .col-first height: 100%; överflöde: scroll;
Det handlar om att lösa saker på det mest lämpliga sättet.
En grundvy kan verkligen begränsa det som är synligt på en webbsida. Ta en titt på hur Gmail minskar bordsskyddet om det finns mindre vertikala fastigheter:
Det här Gmail-exemplet visar att en brytpunkt inte betyder att en layout är bruten, istället se det som en möjlighet att förbättra saker.
Hur som helst hoppas jag att det här har upprepat vikten av att inte anta någonting där brytpunkterna berörs. Låt oss veta i kommentarerna om du någonsin har använt min-höjd media frågor, och vad för!
Accentsconagua