Share
Ich habe gesehen, dass dies in letzter Zeit einige Male vorgekommen ist, normalerweise auf Websites mit fester Navigation auf der linken Seite. Sie haben reizvolle, fließende Grundrisse, die sich auf großen Bildschirmen erstrecken und auf kleineren Geräten stapeln, aber sie werden immer noch von einem hinterlistigen Bruchpunkt geplagt, an den wenige Leute denken. Ich nehme ungefähr Viewport Höhe.
Lassen Sie mich Ihnen ein Beispiel geben. Hier ist ein einfaches responsives Layout. zwei Spalten, die sich genau so verhalten, wie Sie es erwarten würden. Lassen Sie den Browser größer und kleiner werden und Sie werden sehen, was ich meine.
Dieses Layout beginnt zuerst mobil, wobei die beiden Divs übereinander gestapelt sind. Bei Bildschirmen mit einer Mindestbreite von 800px wird es dann mit seiner festen linken Spalte in Spalten aufgeteilt.
@media screen und (min-width: 800px)
Der Hauptinhalt wird nach oben und unten gescrollt, während die erste Spalte links fixiert bleibt. Wir können eine Navigation in die linke Spalte einfügen, vielleicht einen Avatar oder ähnliches.
Alles scheint gut zu sein, aber schauen Sie, was passiert, wenn wir unseren Browser verkleinern vertikal; Die Navigation wird ausgeblendet und ist nicht zugänglich.
Ich kenne eigentlich niemanden, der so blättert, aber trotzdem können wir nicht davon ausgehen, dass ein Breitbildschirm automatisch auch einen Großbildschirm bedeutet.
Medienabfragen können weit mehr als nur die Seitenbreite identifizieren. Sie können darauf reagieren Pixeldichte, Orientierung, ob der Bildschirm ist Farbe oder einfarbig, das Seitenverhältnis, Ladungen von Sachen.
In diesem Fall können wir uns auf das Geradlinige verlassen min-Höhe, indem Sie eine zweite Bedingung zu unserer bestehenden Medienanfrage hinzufügen:
@media screen und (min-width: 800px) und (min-height: 500px)
Jetzt wirkt sich unsere Anordnung mit fester linker Spalte erst aus, wenn der Bildschirm breiter als 800 Pixel ist und mindestens 500px hoch. Schauen Sie sich die Demo an und überzeugen Sie sich selbst.
Wir müssen das Layout nicht vollständig ändern, um unser Menü zugänglich zu machen. Wir könnten stattdessen der Navigationsspalte eine separate Bildlaufleiste hinzufügen, wenn das Ansichtsfenster nicht hoch genug ist, um alles darzustellen. Schauen Sie sich das an.
@media screen und (max-height: 500px) .col-first height: 100%; Überlauf: blättern;
Es geht darum, die Dinge auf die am besten geeignete Weise zu lösen.
Ein flaches Ansichtsfenster kann die Sichtbarkeit einer Webseite einschränken. Sehen Sie sich an, wie Google Mail die Tischauffüllung reduziert, wenn weniger Platz vorhanden ist:
Dieses Google Mail-Beispiel beweist, dass ein Haltepunkt kein Layout bedeuten muss gebrochen, sehen es stattdessen als Chance, die Dinge zu verbessern.
Auf jeden Fall hoffe ich, dass dies die Wichtigkeit bekräftigt hat, bei Bruchstellen nichts anzunehmen. Teilen Sie uns in den Kommentaren mit, ob Sie jemals Gebrauch gemacht haben min-Höhe Medienanfragen und wozu!
Accentsconagua