Share
Am văzut că acest lucru se întâmplă de câteva ori recent, de obicei pe site-urile cu navigare fixă care rulează pe partea stângă. Ei vor avea planuri minunate și fluide, care se vor întinde pe ecrane largi și se vor ridica pe dispozitive mai mici, dar vor cădea în continuare într-un punct de spargere pe care puțini oameni îl gândesc. Mă duc la fereastra de vizualizare înălţime.
Permiteți-mi să vă dau un exemplu. Iată un simplu aspect receptiv; două coloane care se comportă exact așa cum v-ați aștepta. Faceți browserul să crească și să se micșoreze și veți vedea ce vreau să spun.
Acest aspect începe în primul rând cu dispozitive mobile, cele două divizii fiind așezate unul peste celălalt. Apoi se împarte în coloane, cu coloana stângă fixă, pe ecrane cu o lățime minimă de 800px.
Ecran @media și (min-width: 800px)
Conținutul principal se derulează în sus și în jos, în timp ce prima coloană rămâne fixată spre stânga. Putem oferi o navigație în coloana din stânga, poate un avatar, așa ceva.
Totul pare bine, dar uita ce se întâmplă atunci când ne micșorează browserul vertical; navigația devine ascunsă și inaccesibilă.
Nu știu de fapt cineva care navighează așa, dar, totuși, nu putem presupune că un ecran lat înseamnă automat ecran înalt.
Întrebările media sunt capabile să identifice mult mai mult decât lățimea paginii; pot să reacționeze densitatea pixelilor, orientare, dacă ecranul este culoare sau monocrom, aspect-ratio, loturile de lucruri.
În acest caz, ne putem baza pe cea dreaptă min înălțime, adăugând oa doua condiție la interogarea noastră existentă:
Ecranul @media și (min-width: 800px) și (min-height: 500px)
Acum, aranjamentul nostru cu stânga fixă va avea efect numai după ce ecranul este mai lat decât 800 de pixeli și cel puțin 500 de pixeli înălțime. Verificați demo-ul și vedeți-vă singur.
Nu trebuie să modificăm complet aspectul pentru ca meniul nostru să fie accesibil. Am putea adăuga o bară de derulare separată în coloana de navigare atunci când fereastra de vizualizare nu este suficient de mare pentru a dezvălui totul, pentru a arunca o privire.
Ecranul @media și (max-height: 500px) .col-first height: 100%; overflow: parcurgere;
Este vorba despre rezolvarea lucrurilor în modul cel mai potrivit.
Un port de vizualizare superficial poate restricționa cu adevărat ceea ce este vizibil pe o pagină web. Aruncati o privire la modul in care Gmail reduce padding-ul de tabla daca exista mai putin verticale imobiliare:
Acest exemplu Gmail demonstrează că un punct de pauză nu trebuie să însemne că este un aspect spart, a vedea în schimb ca o oportunitate de a îmbunătăți lucrurile.
În orice caz, sper că acest lucru a reiterat importanța lipsei de a lua orice în cazul punctelor de pauză. Spuneți-ne în comentariile dvs. dacă ați folosit vreodată min înălțime interogări media și pentru ce!
Accentsconagua