CSS-Ansichtsfenstereinheiten für schnelles Layout

CSS-Viewport-Einheiten gibt es schon seit einigen Jahren und mit der Zeit beginnen immer mehr Entwickler, sie zu verwenden. Der Vorteil besteht darin, dass sie uns eine Möglichkeit zur dynamischen Größenanpassung bieten, ohne dass JavaScript erforderlich ist. Und wenn das Ganze scheitert, gibt es jede Menge Backup-Pläne.

In diesem Artikel erfahren wir mehr über CSS Viewport-Einheiten und wie man sie verwendet. Anschließend werden wir uns einige häufige Probleme und ihre Lösungen und Anwendungsfälle ansehen. Lassen Sie uns beginnen.

Einführung

Gemäß der CSS-Spezifikation sind die Prozenteinheiten des Ansichtsfensters relativ zur Größe des anfänglichen umschließenden Blocks, der das Stammelement der Webseite darstellt.

Die Ansichtsfenstereinheiten sind: vw , vh , vmin und vmax .

Die vw -Einheit stellt einen Prozentsatz der Breite des Stammelements dar. 1vw entspricht 1% der Ansichtsfensterbreite.

Ansichtsfensterbreite

Die vw Einheit stellt einen Prozentsatz der Breite des Stammelements dar. 1vw entspricht 1% der Ansichtsfensterbreite.

Angenommen, wir haben ein Element mit dem folgenden CSS:

.element {
    Breite: 50vw;
}

Wenn die Ansichtsfensterbreite 500px beträgt, wird 50vw wie folgt berechnet

Breite = 500*50% = 250px

Ansichtsfensterhöhe

Die vh Einheit stellt einen Prozentsatz der Höhe des Stammelements dar; ein vh entspricht 1% der Höhe des Ansichtsfensters.

Wir haben ein Element mit folgendem CSS:

.element {
    Höhe: 50vh;
}

Wenn die Ansichtsfensterhöhe 290px beträgt, wird 70vh wie folgt berechnet:

Höhe = 290*70% = 202px

Jeder sagt, dass in seinem Lebenslauf kein Projekt steht, also habe ich für jeden ein Projekt gesucht und zusätzlich ein [Bau-Tutorial] angehängt.

Vmin Einheit

vmin stellt den kleineren Wert der Breite und Höhe des Ansichtsfensters dar, also den kleineren Wert von vw und vh . Wenn die Breite des Ansichtsfensters größer als seine Höhe ist, wird der Wert basierend auf der Höhe berechnet.

Nehmen wir das folgende Beispiel.

Wir haben ein Querformattelefon mit einem Element, das über eine vmin Einheit verfügt. In diesem Fall wird der Wert basierend auf der Ansichtsfensterhöhe berechnet, da diese kleiner als die Breite ist.

.element {
    Polsterung oben: 10 vmin;
    Polsterung unten: 10vmin;
}

So wird vmin berechnet:

Wie Sie sich vielleicht vorstellen können, lauten die Berechnungen wie folgt

padding-top = (10 % der Höhe) = 10 % * 164 = 16,4 Pixel 
 
padding-bottom = (10 % der Höhe) = 10 % * 164 = 16,4 Pixel

Vmax-Einheit

vmax ist das Gegenteil von vmin und ist der größere Wert von vw und vh .

Nehmen wir das folgende Beispiel.

.element {
    Polsterung oben: 10vmax;
    Polsterung unten: 10vmax;
} 

Die Berechnungsergebnisse sind wie folgt:

padding-top = (10 % der Breite) = 10 % * 350 = 35px 
padding-bottom = (10% der Breite) = 10% * 350 = 35p

Wie unterscheiden sich Ansichtsfenstereinheiten von Prozentsätzen?

Ansichtsfenstereinheiten basieren auf dem Stammelement der Seite, während Prozentsätze auf dem Container basieren, in dem sie sich befinden. Sie unterscheiden sich daher voneinander, haben aber jeweils ihre eigenen Einsatzmöglichkeiten.

Anwendungsfall: Schriftgröße in Ansichtsfenstereinheiten

CSS-Ansichtsfenstereinheiten eignen sich hervorragend für reaktionsfähige Typografie. Als Titel für unseren Artikel könnten wir beispielsweise Folgendes verwenden:

.Titel {
    Schriftgröße: 5vw;
}

font-size des Titels wird je nach Ansichtsfensterbreite vergrößert oder verkleinert. Es ist, als würden Sie eine Schriftgröße angeben, die 5％ der Ansichtsfensterbreite beträgt. Allerdings kann die Verwendung ohne entsprechende Tests zu Fallstricken führen. Schauen wir uns das folgende Video an:

Die Körpergröße wird sehr klein, was sich nicht gut auf die Zugänglichkeit und das Benutzererlebnis auswirkt. Soweit ich weiß, sollte die Mindestschriftgröße auf Mobilgeräten nicht weniger als 14px betragen. Im GIF nicht kleiner als 10px .

Um dieses Problem zu lösen, müssen wir eine Mindestschriftgröße für den Titel angeben, was wir mit calc() tun können.

.Titel {
    Schriftgröße: calc(14px + 2vw);
}

calc() hat einen Mindestwert von 14px und addiert dazu einen Wert von 2vw . Damit werden die Schriftgrößenwerte nicht zu klein.

Ein weiterer wichtiger Punkt, den es zu berücksichtigen gilt, ist das Verhalten der Schriftgröße auf größeren Bildschirmen, wie beispielsweise 27” iMac . Was passiert? Sie ahnen es schon, die Schriftgröße liegt bei etwa 95px , was ein großer Wert ist. Um dies zu verhindern, sollten wir Medienabfragen verwenden und die Schriftgröße an bestimmten Haltepunkten ändern.

@media (Mindestbreite: 1800px) {
    .Titel {
        Schriftgröße: 40px;
    }
}

Durch das Zurücksetzen der Schriftgröße können wir sicherstellen, dass die Größe nicht zu groß wird. Möglicherweise müssen Sie auch mehrere Medienabfragen hinzufügen, aber das liegt bei Ihnen und hängt vom Kontext Ihres Projekts ab.

Beispieladresse: https://codepen.io/shadeed/pen/fa989837c6379770cce49f0be6daa3e3

Vollbild

Manchmal benötigen wir ein p , um 100% der Ansichtsfensterhöhe zu erhalten. Dazu können wir viewport verwenden.

.P {
    Höhe: 100vh;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
}

Durch Hinzufügen von height: 100vh können wir sicherstellen, dass p Höhe 100% des Ansichtsfensters einnimmt. Zusätzlich haben wir einige flexbox hinzugefügt, um die horizontale und vertikale Zentrierung des Inhalts zu handhaben.

Beispiel-Quellcode: https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=1100

Sticky-Layout (Fußzeile)

Auf großen Bildschirmen ist der Inhalt der Website teilweise spärlich dargestellt und footer klebt nicht am unteren Rand. Dies ist normal und wird nicht als schlechte Praxis angesehen. Es besteht jedoch noch Verbesserungsbedarf. Betrachten Sie das folgende Diagramm, das das Problem darstellt:

Um dies zu beheben, müssen wir dem Inhalt eine Höhe geben, die der Ansichtsfensterhöhe (Kopf- und Fußzeile) entspricht. Dies dynamisch durchzuführen ist schwierig, mit dem Ansichtsfenster von CSS ist es jedoch einfach.

Erste Lösung: calc und Ansichtsfenstereinheiten

Wenn die Höhe header und footer fest ist, können Sie calc() mit Ansichtsfenstereinheiten wie folgt kombinieren:

Kopfzeile,
Fußzeile {
    Höhe: 70px;
}
 
hauptsächlich {
    Höhe: berechnet (100vh – 70px – 70px);
}

Es gibt keine Garantie, dass diese Lösung immer funktioniert, insbesondere于footer . Ich habe in meiner Laufbahn nie eine footer mit fixer Höhe verwendet, da dies beispielsweise bei unterschiedlichen Bildschirmgrößen nicht umsetzbar wäre.

2. Zweite Lösung: Flexbox und Viewport-Einheiten ( empfohlen )

Indem Sie 100vh als Höhe body -Elements festlegen, können Sie anschließend Flexbox verwenden, um main den verbleibenden Platz einnehmen zu lassen.

Körper {
    Mindesthöhe: 100vh;
    Anzeige: Flex
    Flex-Richtung: Spalte;
{
 
hauptsächlich {
    /* Dadurch nimmt das Hauptelement den verbleibenden Platz dynamisch ein */
    Flex-Wachstum: 1;
}

Auf diese Weise ist das Problem gelöst und wir haben einen Sticky footer unabhängig von der Inhaltslänge.

Beispiel-Quellcode: https://codepen.io/shadeed/pen/c735b26b8fa97ee685b38084448b3f85?editors=1100

Responsive Elemente

Nehmen wir an, wir haben ein Portfolio, das unsere Responsive-Design-Arbeit präsentiert, und wir haben drei Geräte (Mobiltelefon, Tablet und Laptop). Jedes Gerät enthält ein Bild. Ziel ist es, diese Seiten mittels CSS responsiv anzupassen.

Durch die Verwendung von CSS-Raster- und Ansichtsfenstereinheiten können wir es vollständig dynamisch und reaktionsfähig gestalten.

<div Klasse="Wrapper">
  <div class="Gerät Laptop"></div>
  <div class="mobiles Gerät"></div>
  <div class="Gerät Tablet"></div>
</div>

Ansichtsfenstereinheiten können auch in grid- * Eigenschaften, aber auch in border , border-radius und anderen Eigenschaften verwendet werden.

.wrapper {
  Anzeige: Raster;
  Raster-Vorlagenspalten: Wiederholung (20, 5vw);
   Raster-Auto-Zeilen: 6vw;
}
 
.mobile {
   Position: relativ;
  Z-Index: 1;
  Rasterspalte: 2 / Spanne 3;
  Gitterzeile: 3 / Spanne 5;
}

 .tablet {
  Position: relativ;
  Z-Index: 1;
  Gitterspalte: 13 / Spanne 7;
   Gitterzeile: 4 / Spanne 4;
  Rahmen unten: 1vw durchgezogen #a9B9dd;
  Rand rechts: durchgezogen 3vw #a9B9dd;
}

 .laptop {
  Position: relativ;
  Gitterspalte: 3/Spanne 13;
  Gitterzeile: 2 / Spanne 8;
}
 
/* Ansichtsfenstereinheiten werden für unten, links, rechts, Höhe und Randradius verwendet. Ist das nicht cool? */
.laptop:nach {
    Inhalt:"";
    Position: absolut;
    unten: -3vw;
    links: -5,5vw;
    rechts: -5,5vw;
    Höhe: 3vw;
    Hintergrundfarbe: #a9B9dd;
    Randradius: 0 0 1vw 1vw;
} 

Beispiel-Quellcode: https://codepen.io/shadeed/pen/2da0f2b70699769f8de3220ff4465bc6?editors=1100

Befreie dich vom Container

Mir ist ein Anwendungsfall aufgefallen, der sich am besten zum Bearbeiten von Layouts eignet. Ein untergeordnetes Element, das 100％ der Breite des Ansichtsfensters einnimmt, auch wenn die Breite des übergeordneten Elements eingeschränkt ist. Bedenken Sie Folgendes:

.Ausbruch {
    Breite: 100vw;
    Position: relativ;
    links: 50%;
    rechts: 50%;
    Rand links: -50vw;
    Rand rechts: -50vw;
}

Lassen Sie uns das etwas aufschlüsseln, damit wir Schritt für Schritt verstehen, wie all diese Eigenschaften funktionieren.

1. width: 100vw

Der wichtigste Schritt besteht darin, die Breite des Bildes auf 100% des Ansichtsfensters einzustellen.

2. Fügen Sie margin-left: -50vw

Um das Bild zu zentrieren, müssen wir ihm einen negativen Rand mit einer Breite von der Hälfte der Ansichtsfensterbreite zuweisen.

3. left: 50%

Schließlich müssen wir das Bild um einen Wert von 50％ der übergeordneten Breite nach rechts verschieben.

Beispieladresse: https://codepen.io/shadeed/pen/828f12b1ef7fa7211584ff5c7b82d2fa?editors=1100

Vertikaler und horizontaler Abstand

Ein weiterer interessanter Anwendungsfall, der mir in den Sinn kommt, ist die Verwendung von Ansichtsfenstereinheiten zur Darstellung des Abstands zwischen Elementen. Dies kann in Verbindung mit Werten wie margin , top , bottom und grid-gap verwendet werden. Bei Verwendung richtet sich der Abstand nach der Breite oder Höhe des Ansichtsfensters. Dies kann hilfreich sein, um Ihr Layout dynamischer zu gestalten.

Modalbox

Für Modale müssen wir sie von der Oberseite des Ansichtsfensters hineinschieben. Normalerweise tun Sie dies mit top Eigenschaft und verwenden entweder einen Prozentsatz oder einen Pixelwert. Mit Ansichtsfenstereinheiten können wir jedoch einen Abstand hinzufügen, der sich basierend auf der Ansichtsfensterhöhe ändern kann.

.modal-body {
    oben: 20vh;
}

Beispieladresse: https://codepen.io/shadeed/pen/f77a0d58947c64c2b3dadbd887700db5?editors=1100

Seitenkopf

Der header ist der Teil, der als Einführung der Seite dient. Es enthält normalerweise einen Titel und eine Beschreibung sowie eine feste Höhe oder Polsterung an den oberen und unteren Kanten.

Nehmen wir beispielsweise den folgenden CSS-Stil an:

.Seitenkopfzeile {
    Polsterung oben: 10vh;
    Polsterung unten: 10vh;
}
 
.page-header h2 {
    Rand unten: 1,5vh;
}

Verwenden Sie vh Einheiten zum Auffüllen des Seitentitels und für den Rand unter dem Titel. Beachten Sie, wie sich der Abstand ändert!

Beispiel-Quellcode: https://codepen.io/shadeed/pen/43024fa031519e316e95bb3ce47f2b22?editors=1100

Vmin- und Vmax-Anwendungsfälle

In diesem Anwendungsfall geht es um die obere und untere padding des Seitentitelelements. Wenn das Ansichtsfenster kleiner ist (mobil), wird padding normalerweise reduziert. Durch die Verwendung vmin können wir die entsprechende obere und untere padding basierend auf der kleineren Dimension des Ansichtsfensters (Breite oder Höhe) erhalten.

.Seitenkopfzeile {
    Polsterung: 10vmin 1rem;
} 

Beispiel-Quellcode: https://codepen.io/shadeed/pen/f335c2f43b960a2c70ea057228ddc5b9?editors=0100

Seitenverhältnis

Wir können vw Einheiten verwenden, um reaktionsfähige Elemente zu erstellen, die ihr Seitenverhältnis unabhängig von der Ansichtsfenstergröße beibehalten.

Zuerst müssen Sie das gewünschte Seitenverhältnis bestimmen. Verwenden Sie für dieses Beispiel 9/16 .

P {
    /* 9/16 * 100 */
    Höhe: 56,25vw;
} 

Beispiel-Quellcode: https://codepen.io/shadeed/pen/dc4e82f3c873cc64ae5c5bc4a3f4ef9f?editors=0100

Beliebte obere Grenze

Kennen Sie den oberen Rahmen, den die meisten Websites verwenden? Oft hat es die gleiche Farbe wie die Marke, was ihm eine gewisse Persönlichkeit verleiht.

Wir unterstützen einen Anfangswert von 3px für den Rahmen. Wie konvertiere ich einen festen Wert in ein Ansichtsfensterobjekt? So berechnen Sie das vw Äquivalent.

vw = (Pixelwert / Ansichtsfensterbreite) * 100

Die Ansichtsfensterbreite wird verwendet, um das Verhältnis zwischen Pixelwerten und erforderlichen vw Einheiten abzuschätzen.

Für unser Beispiel fügen wir der header folgende Stile hinzu:

.header {
    Rahmen oben: 4px durchgezogen #8f7ebc;  
}

In meinem Fall beträgt die Ansichtsfensterbreite 1440 (das ist keine feste Zahl, bitte ersetzen Sie sie durch Ihre eigene)

vw = (4 / 1440) * 100 = 0,277

.header {
    Rahmen oben: 0,277vw durchgezogen #8f7ebc;  
}

Noch besser: Wir können einen Basispixelwert verwenden und die Ansichtsfenstereinheit kann additiv sein.

.header {
    Rahmen oben: calc(2px + 0,138vw) solid $color-main;
}

Probleme beim Scrollen auf Mobilgeräten

Bei Mobilgeräten besteht häufig das Problem, dass selbst bei 100vh ein Scrollen erforderlich ist, da die Höhe der Adressleiste sichtbar ist. Louis Hoebregts hat einen Artikel über dieses Problem geschrieben und eine einfache Lösung angeboten.

.mein-element {
  Höhe: 100vh; /* Fallback für Browser, die keine benutzerdefinierten Eigenschaften unterstützen */
  Höhe: berechnet (var (--vh, 1vh) * 100);
}

// Zuerst ermitteln wir die Ansichtsfensterhöhe, die wir mit 1 % multiplizieren, um einen Wert in VH-Einheiten zu erhalten. let vh = window.innerHeight * 0,01;
// Legen Sie dann den Wert in der benutzerdefinierten Eigenschaft „--vh“ auf eine Eigenschaft im Stammverzeichnis des Dokuments fest. document.documentElement.style.setProperty('--vh', „${vh}px“); 

Beispiel-Quellcode: https://codepen.io/shadeed/pen/1d18ca2d23ec0038c759dc62dc3fd8c3?editors=0110

Dies ist das Ende dieses Artikels über die Verwendung von CSS Viewport-Einheiten zur schnellen Layouterstellung. Weitere relevante Inhalte zu CSS Viewport-Einheiten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!