Wenn Sie diesen Titel sehen, denken Sie vielleicht, dass es sich um einen weiteren Tippfehler handelt, nämlich um ein responsives Höhendesign? Meinst du das ernst? Denn „Responsive Webdesign“ prüft Browser typischerweise auf mehrere Breiten und Gerätegrößen. Im Allgemeinen passen wir die horizontale Reaktionsfähigkeit durch Reduzieren der Breite an, aber ich sehe selten, dass die vertikale Reaktionsfähigkeit durch Reduzieren der Browserhöhe berücksichtigt wird. Zu diesem Zeitpunkt hat Zhimimi möglicherweise eine leichte Schwankung in seinem Herzen und stellt sich einige Fragen: Müssen wir die Höhe des Browsers verringern? Ja, lasst uns weiter darüber reden.
Wenn wir eine Website entwerfen, ist es nicht gut, Annahmen zu treffen, ohne sich auf tatsächliche Daten zu verlassen. Auch die Verantwortung für horizontale und vertikale Tests ist sehr wichtig.
Für einen Designer ist eine unangemessene Annahme einer der wichtigen Faktoren, die das Design einer Website ruinieren. Es ist beispielsweise falsch anzunehmen, dass Benutzer beim Surfen auf einer Website die gesamte Breite und Höhe des Bildschirms nutzen müssen. Stattdessen müssen wir das Worst-Case-Szenario in Betracht ziehen.
Zhimi, verstehst du? Die Realität ist, dass nicht alle Benutzer Browser so verwenden, wie wir es von ihnen erwarten. Ich finde, dass die Website schrecklich aussieht, wenn ich die Browserhöhe verringere.
Die Größenänderung des Browsers (vertikal) ist nicht die einzige Möglichkeit, die Höhe des Ansichtsfensters zu ändern. Wenn wir die Browser-DevTools öffnen, nimmt sie auch die Höhe des Browsers ein.
Der Pfeilbereich im Bild oben stellt die Höhe des aktuellen Ansichtsfensters dar. Bei kleineren Laptop-Bildschirmen sehen wir nur einen kleinen Teil der Webseite.
Die eigentliche Frage ist: Können wir das Benutzererlebnis verbessern, wenn die Höhe des Ansichtsfensters kleiner ist? Ja, es ist möglich, werfen wir einen Blick darauf.
Als Designer und Entwickler konzentrieren sich einige von uns nur auf die Breitenänderungen des Designs und ignorieren die Höhenänderungen des Ansichtsfensters. In der Entwicklung stellt die Benutzeroberfläche beispielsweise Variationen bestimmter Komponenten über verschiedene Ansichtsfensterbreiten hinweg bereit. Aber wie sieht es mit unterschiedlichen Ansichtsfensterhöhen aus?
Im Bild oben haben wir ein Navigationsmenü, das sich an die Höhe des Ansichtsfensters anpasst. . Wenn die Größe des Ansichtsfensters klein ist (z. B. iPhone 5), werden Navigationselemente als zweispaltiges Raster angezeigt. Diese Denkweise wird oft aufgegeben oder optimiert, bis jemand sagt, dass es getan werden sollte.
Es gibt zwei verschiedene Möglichkeiten, die oben genannten Anforderungen in CSS zu erreichen:
Vertikale MedienabfragenViewport-EinheitenZhimimi weiß definitiv, wie man Breiten-Medienabfragen in CSS verwendet.
@media (min-width: 700px) { .element { /* etwas tun.. */ }}Weniger häufig verwendet wird die vertikale Medienabfrage, die die Höhe des Ansichtsfensters überprüft.
@media (min-height: 500px) { .element { /* etwas tun.. */ }}/* oder */@media (Ausrichtung: Querformat) { .element { /* etwas tun.. */ }}Die Verwendung von Ansichtsfenstereinheiten kann dazu beitragen, den Benutzern ein besseres Erlebnis zu bieten. Steuern Sie beispielsweise den vertikalen Abstand zwischen Elementen basierend auf der Höhe des Ansichtsfensters.
.hero__title { margin-bottom: calc(10px + 5vh);}
Wie oben gezeigt, wird der untere Rand bei größeren Bildschirmen (z. B. iMac 27 Zoll) sehr groß. Wir haben zwei Möglichkeiten, das Problem zu hoher Margen zu lösen.
MedienabfragenCSS-VergleichsfunktionDer erste Weg (Medienabfragen) wird stärker unterstützt. Wenn der Bildschirm groß ist, müssen wir einen Maximalwert für den unteren Rand festlegen.
@media (min-width: 2200px) { .hero__title { margin-bottom: 40px }}Eine andere Methode ist die Verwendung der CSS-Vergleichsfunktion „clamp()“. Die Funktion der Funktion „clamp()“ besteht darin, einen Wertebereich zurückzugeben.
.hero__title { margin-bottom: clamp(10px, 5vh, 40px);}In diesem Beispiel gibt es einen Abschnittsbereich mit Abschnitten für Titel und Abbildungen, und die Abschnittshöhe entspricht 100 % der Höhe des Ansichtsfensters.
Alles sieht gut aus, bis die Höhe des Ansichtsfensters kleiner wird. Die Höhe des Abschnitts reicht nicht aus, um die Abbildungen und den Textinhalt aufzunehmen. Daher überlappt es andere Teile auf der Seite.
Beachten Sie, dass sich die Abbildung mit dem folgenden Abschnitt überschneidet. Dies geschieht, weil genügend vertikaler Raum vorhanden ist. Schauen Sie sich HTML und CSS an.
<p class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- content --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>CSS
.hero { height: 100vh;}.hero__thumb { flex: 0 0 550px;}Hier sind mehrere Lösungen, um solche Probleme zu lösen:
Legen Sie eine feste Größe (Breite und Höhe) für die Abbildung fest und nicht nur die Breite. Aufgrund der fehlenden Höhe tritt dieses Problem weiterhin auf. Höhe: 100 VH nur, wenn die Höhe des Ansichtsfensters größer als 700 Pixel ist (der Medienabfragewert kann je nach Kontext variieren).Wir können beides kombinieren, um eine leistungsfähigere Lösung zu erhalten.
.hero__thumb { width: 400px; height: 300px;Okay, jetzt sind wir uns einig, dass die Verwendung vertikaler Medienabfragen besser ist. Die Verwendung von 100 Vh ist jedoch riskant, denn selbst wenn wir die Größe der Abbildung begrenzen, können wir möglicherweise nicht dasselbe mit dem Textinhalt erreichen. Wenn der Textinhalt länger wird, tritt das gleiche Problem erneut auf, siehe Abbildung unten:
Um dieses Problem zu lösen, können wir min-height anstelle von height verwenden. Wenn der Inhalt länger wird, vergrößert sich auf diese Weise die Höhe und es kommt zu keiner Überlappung.
@media (min-height: 700px) { .hero { min-height: 100vh }}Das Anheften des Titels während des Scrollens ist keine schlechte Sache. Wir möchten jedoch sicherstellen, dass wir den Titel nur dann anheften, wenn der vertikale Abstand gut genug ist, damit das Erlebnis gut ist.
Dies ist eine Website über Landschaften. Hier können wir sehen, dass die feste Höhe insgesamt viel Platz einnimmt. Ist das für Benutzer wirklich wichtig? In den meisten Fällen ist es nicht wichtig, da der durchschnittliche Benutzer nicht herauszoomt, um eine Website wie diese zu sehen. Wenn wir derzeit optimieren möchten, können wir die vertikale Medienabfrage verwenden, um die feste Positionierung in eine statische Positionierung zu ändern, wenn festgestellt wird, dass die Höhe unter einer bestimmten Höhe liegt.
@media (min-height: 700px) { .site-header { /* Position: fest oder Position: Sticky */ }}Dieses Muster ist mir in der Navigationsleiste von Twitter.com aufgefallen. Die Idee besteht darin, vertikale Medienabfragen mit dem Priority+-Muster zu kombinieren.
Wenn die Höhe des Ansichtsfensters geändert wird, werden die weniger wichtigen Elemente (Lesezeichen und Listen) entfernt und an das Menü „Mehr“ angehängt, was ein guter Anwendungsfall für vertikale Medienabfragen ist.
.nav__item--secondary { display: none;}@media (min-height: 700px) { .nav__item--secondary { display: block }}Wenn unsere Website über eine Seitenleiste oder Seitenleiste verfügt und die Höhe des Ansichtsfensters klein ist, können wir den vertikalen Abstand zwischen einigen Navigationselementen verringern, was auch das Gesamtdesign verbessert.
Wir wissen, dass die Modalbox mindestens horizontal zentriert sein sollte. Manchmal müssen wir es jedoch auch vertikal zentrieren. Im Allgemeinen verwenden wir die folgende Lösung:
.modal__body { position: absolute; top: 50 %;
Wenn der Inhalt jedoch zu lang wird, besteht das Problem, dass das Modal den Bildschirm vertikal ausfüllt und der Benutzer nicht in der Lage ist, einen Bildlauf durchzuführen.
Für diese Situation gibt es mehrere Gründe:
Das Modalfeld hat keine Höhe und das Modal ist vertikal zentriert (dadurch tritt das Problem schneller auf).Hier ist das reparierte CSS:
.modal__body { position: absolute; top: translatorX(-50%); max-height: auto;}@media (min-height: 700px) { .modal__body { top: 50%; transform: Translate(-50%, -50%);Beachten Sie, dass ich Min-Height und Max-Height verwendet habe. Bei der Min-Höhe geht es darum, dass das Modal auch dann gut aussieht, wenn der Inhalt kurz ist. Bei der Max-Höhe geht es darum, die Höhe mithilfe eines bestimmten Werts zu begrenzen, anstatt eine feste Höhe hinzuzufügen.
Bei der Gestaltung eines Erlebnisses ist es am besten, in Breite und Höhe zu denken. Die vertikale Größenänderung Ihres Browsers mag etwas seltsam sein, hat aber seine Vorteile. In diesem Artikel diskutieren wir die Bedeutung vertikaler Tests und wie wir vertikale Tests durchführen. Abschließend schlagen wir einige Beispiele und Anwendungsfälle vor, von denen wir hoffen, dass sie für Smartmi-Benutzer nützlich sind.
Oben geht es um das Höhendesign in responsiven Webseiten. Müssen Sie die Höhe des Browsers verringern? Weitere Informationen finden Sie in anderen verwandten Artikeln auf dieser Website!