Tipps zum Erstellen von Medienabfragen mit den CSS-Viewport-Einheiten vh und vmin

Tipps zum Erstellen von Medienabfragen mit den CSS-Viewport-Einheiten vh und vmin

Mit der Beliebtheit mobiler Geräte ist Responsive Design zu einer wesentlichen Technologie für modernes Webdesign geworden. Um sich an unterschiedliche Bildschirmgrößen anzupassen, müssen Entwickler Layout und Stile durch Medienabfragen anpassen. Bei Medienabfragen ist die am häufigsten verwendete Einheit Pixel (px). Allerdings führt CSS3 eine neue Fenstereinheit ein, vh und vmin, die sich besser an unterschiedliche Gerätegrößen anpassen lässt. In diesem Artikel wird beschrieben, wie Sie Medienabfragen mit vh- und vmin-Einheiten erstellen, zusammen mit spezifischen Codebeispielen.

Lassen Sie uns zunächst die Bedeutung der Einheiten vh und vmin verstehen. vh stellt den Prozentsatz der Fensterhöhe dar und vmin stellt den kleineren Wert aus Fensterbreite und -höhe dar. Wenn beispielsweise die Höhe eines Ansichtsfensters 800 Pixel und die Breite 1200 Pixel beträgt, entspricht 1vh 8 Pixel (800 0,01) und 1vmin entspricht 8 Pixel (800 0,01). Mit diesen beiden Einheiten können die Abmessungen, Ränder, Schriftgröße usw. des Elements festgelegt werden.

Als nächstes besprechen wir, wie man Medienabfragen mit vh- und vmin-Einheiten erstellt. Angenommen, wir möchten den Stil eines Elements ändern, wenn die Höhe des Ansichtsfensters weniger als 600 Pixel beträgt. Wir könnten den folgenden Code verwenden:

@media (max-height: 600px) {
  .element {
    /* 设置需要改变的样式 */
  }
}

Der gleiche Effekt kann jedoch prägnanter mit vh-Einheiten erzielt werden:

@media (max-height: 60vh) {
  .element {
    /* 设置需要改变的样式 */
  }
}

In diesem Beispiel wird der Stil von .element angewendet, wenn die Höhe des Ansichtsfensters kleiner oder gleich ist 60 %. Auf diese Weise können wir den Stil flexibler an die Größe des Ansichtsfensters anpassen.

Zusätzlich zu Medienabfragen können wir die Größe von Elementen auch mithilfe der Einheiten vh und vmin festlegen. Wenn wir beispielsweise möchten, dass die Höhe eines Elements immer 50 % der Höhe des Ansichtsfensters entspricht, können wir den folgenden Code verwenden:

.element {
  height: 50vh;
}

Ähnlich gilt, wenn wir möchten, dass die Ränder eines Elements immer dem kleineren entsprechen der Breite und Höhe des Ansichtsfensters Für 10 % können Sie den folgenden Code verwenden:

.element {
  margin: 10vmin;
}

Durch die Verwendung von vh- und vmin-Einheiten können wir problemlos responsive Designs implementieren, ohne feste Pixeleinheiten zu verwenden. Dadurch wird das Layout nicht nur flexibler, sondern passt sich auch besser an unterschiedliche Gerätebildschirmgrößen an.

Beim Schreiben von Code, der vh- und vmin-Einheiten verwendet, müssen wir einige Dinge berücksichtigen. Erstens verfügen VH-Einheiten möglicherweise über Bildlaufleisten, die auf mobilen Geräten angezeigt werden. Daher müssen wir sicherstellen, dass der Stil des Elements nicht durch die Bildlaufleiste verdeckt wird. Zweitens unterstützen einige Browser möglicherweise keine vh- und vmin-Einheiten, insbesondere ältere Browserversionen. Daher müssen wir bei der Verwendung dieser Einheiten Kompatibilitätsprüfungen durchführen und Fallback-Optionen bereitstellen.

Zusammenfassend lässt sich sagen, dass die Verwendung der CSS-Viewport-Einheiten vh und vmin die Erstellung von Medienabfragen für responsives Design vereinfacht. Durch Festlegen der Größe und des Stils der Elemente können wir das Layout an die Fenstergröße anpassen und dafür sorgen, dass die Webseite auf verschiedenen Geräten ein gutes Benutzererlebnis bietet. Bei der Verwendung dieser Einheiten müssen wir jedoch auf Kompatibilität achten und Problemumgehungen bereitstellen, um sicherzustellen, dass die Seite auf verschiedenen Browsern und Geräten korrekt angezeigt wird.

Das obige ist der detaillierte Inhalt vonTipps zum Erstellen von Medienabfragen mit den CSS-Viewport-Einheiten vh und vmin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!