CSS-Viewport: So verwenden Sie vh-, vw-, vmin- und vmax-Einheiten für responsives Design

CSS-Ansichtsfenster: So verwenden Sie vh-, vw-, vmin- und vmax-Einheiten, um responsives Design zu erreichen, spezifische Codebeispiele erforderlich

Bei modernem responsivem Webdesign möchten wir normalerweise, dass sich die Webseite an verschiedene Bildschirmgrößen und Geräte anpasst Sorgen Sie für eine gute Benutzererfahrung. Die CSS-Ansichtsfenstereinheit (Ansichtsfenstereinheit) ist eines der wichtigen Werkzeuge, die uns dabei helfen, dieses Ziel zu erreichen. In diesem Artikel behandeln wir die Verwendung von vh-, vw-, vmin- und vmax-Einheiten zur Implementierung von responsivem Design und stellen spezifische Codebeispiele bereit.

Werfen wir zunächst einen Blick auf diese neuen Ansichtsfenstereinheiten:

1. vh (Ansichtsfensterhöhe): stellt eine prozentuale Einheit relativ zur Ansichtsfensterhöhe dar. Beispielsweise entspricht 1vh 1 % der Höhe des Ansichtsfensters.
2. vw (Ansichtsfensterbreite): stellt die prozentuale Einheit relativ zur Ansichtsfensterbreite dar. Beispielsweise entspricht 1vw 1 % der Breite des Ansichtsfensters.
3. vmin (Minimum des Ansichtsfensters): Stellt eine prozentuale Einheit relativ zur kleineren Ansichtsfensterbreite und Ansichtsfensterhöhe dar. Beispielsweise entspricht 1vmin 1 % der kleineren Ansichtsfensterbreite oder Ansichtsfensterhöhe.
4. vmax (Maximum des Ansichtsfensters): stellt eine prozentuale Einheit im Verhältnis zum größeren Wert von Ansichtsfensterbreite und Ansichtsfensterhöhe dar. Beispielsweise entspricht 1vmax 1 % des größeren Werts der Ansichtsfensterbreite oder der Ansichtsfensterhöhe.

Als nächstes werden wir anhand eines einfachen Beispiels veranschaulichen, wie diese Einheiten zur Umsetzung von Responsive Design verwendet werden können.

Angenommen, wir haben ein Webseitenlayout, das eine obere Navigationsleiste und einen Inhaltsbereich enthält. Wir möchten, dass die Höhe der Navigationsleiste immer 30 Pixel beträgt und dass sich die Höhe des Inhaltsbereichs an den verbleibenden Platz anpasst.

Zuerst müssen wir den Stil der Navigationsleiste festlegen:

.navbar {
  height: 30px;
}

Als nächstes können wir vh-Einheiten verwenden, um die Höhe des Inhaltsbereichs festzulegen. Angenommen, wir möchten, dass die Höhe des Inhaltsbereichs 80 % der Höhe des Ansichtsfensters einnimmt:

.content {
  height: 80vh;
}

Auf diese Weise wird der Inhaltsbereich unabhängig von der tatsächlichen Höhe des Ansichtsfensters zu 80 % der Höhe gefüllt.

Zusätzlich zur Einstellung der Höhe können wir auch VW-Einheiten verwenden, um die Breite festzulegen. Angenommen, wir möchten, dass die Breite des Inhaltsbereichs 50 % der Breite des Ansichtsfensters einnimmt:

.content {
  width: 50vw;
}

Ebenso können wir die Einheiten vmin und vmax verwenden, um die kleineren und größeren Werte der Höhe des Ansichtsfensters und der Breite des Ansichtsfensters festzulegen. Wenn wir beispielsweise möchten, dass Breite und Höhe eines Elements immer gleich sind, können wir die vmin-Einheit verwenden:

.square {
  width: 50vmin;
  height: 50vmin;
}

Auf diese Weise bleiben Breite und Höhe des Elements unabhängig von der tatsächlichen Breite und Höhe des Elements gleich Ansichtsfenster.

Wenn wir schließlich möchten, dass die Breite oder Höhe eines Elements immer relativ zur maximalen Größe des Ansichtsfensters ist, können wir vmax-Einheiten verwenden. Wenn wir beispielsweise möchten, dass die Breite und Höhe einer Schaltfläche immer nicht mehr als 30 % der Größe des Ansichtsfensters beträgt:

.button {
  width: 30vmax;
  height: 30vmax;
}

Auf diese Weise ist die Breite und Höhe unabhängig von der tatsächlichen Breite und Höhe des Ansichtsfensters Die Größe der Schaltfläche überschreitet nicht die Größe des Ansichtsfensters.

Zusammenfassend lässt sich sagen, dass die Verwendung von vh-, vw-, vmin- und vmax-Einheiten uns dabei helfen kann, ein flexibleres und reaktionsfähigeres Weblayout zu erreichen. Durch Festlegen der Breite und Höhe von Elementen können wir das Layout automatisch an die Größe des Ansichtsfensters anpassen, um das beste Benutzererlebnis zu bieten.

Ich hoffe, dass die Codebeispiele und die Einführung in diesem Artikel Ihnen dabei helfen, CSS-Viewport-Einheiten zu verstehen und zu verwenden. Ich wünsche Ihnen viel Erfolg bei der Umsetzung von Responsive Design!

Das obige ist der detaillierte Inhalt vonCSS-Viewport: So verwenden Sie vh-, vw-, vmin- und vmax-Einheiten für responsives Design. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!