So verwenden Sie die CSS-Viewport-Einheiten vw und vmin, um das Layout an unterschiedliche Bildschirmbreiten anzupassen-CSS-Tutorial-php.cn

So verwenden Sie die CSS-Viewport-Einheiten vw und vmin, um das Layout an unterschiedliche Bildschirmbreiten anzupassen

WBOY

Freigeben： 2023-09-13 10:58:41

Original

662 Leute haben es durchsucht

如何使用 CSS Viewport 单位 vw 和 vmin 来实现适应不同屏幕宽度布局

So verwenden Sie die CSS-Viewport-Einheiten vw und vmin, um ein Layout zu implementieren, das sich an unterschiedliche Bildschirmbreiten anpasst

Mit der Beliebtheit mobiler Geräte ist Responsive Design zu einem der Standards des heutigen Webdesigns geworden. Besonders wichtig ist die Gewährleistung einer guten Darstellung von Webinhalten bei unterschiedlichen Bildschirmgrößen und Auflösungen. Die CSS-Viewport-Einheiten vw (Viewport-Breiteneinheit) und vmin (die kleinere Einheit für Viewport-Breite und -Höhe) können uns dabei helfen, das Ziel zu erreichen, das Layout an unterschiedliche Bildschirmbreiten anzupassen.

VW-Einheiten für das Layout verwenden
Viewport bezieht sich auf den Bereich im Browser, in dem der Benutzer tatsächlich die Webseite durchsucht. Die vw-Einheit ist relativ zur Breite des Ansichtsfensters, wobei 1 vw 1 % der Breite des Ansichtsfensters entspricht. Durch die Verwendung von VW-Einheiten können wir die Größe von Elementen basierend auf der Breite des Ansichtsfensters ändern.

Zum Beispiel können wir die Breite eines Elements auf die Hälfte der Breite des Ansichtsfensters festlegen:

.element {
  width: 50vw;
}

Nach dem Login kopieren

Bei einer Breite des Ansichtsfensters von 1000 Pixel beträgt die Breite des Elements 500 Pixel.

Verwenden Sie vmin-Einheiten für das Layout
Zusätzlich zu vw-Einheiten können wir auch vmin-Einheiten verwenden, um die Größe von Elementen basierend auf der kleineren Breite und Höhe des Ansichtsfensters anzupassen. Dies ist nützlich für die Implementierung von Quadraten oder Elementen mit einem festen Seitenverhältnis.

Zum Beispiel können wir die Breite und Höhe eines Elements auf 20 % des kleineren Werts der Breite und Höhe des Ansichtsfensters festlegen:

.element {
  width: 20vmin;
  height: 20vmin;
}

Nach dem Login kopieren

Wenn die Breite des Ansichtsfensters 1000 Pixel und die Höhe 800 Pixel beträgt, dann sind die Breite und Höhe des element Beide werden 160 Pixel groß sein.

Beispiel für die Verwendung von vw- und vmin-Einheiten zur Implementierung eines Layouts, das sich an verschiedene Bildschirmbreiten anpasst
Hier ist ein Beispiel, das zeigt, wie man vw- und vmin-Einheiten verwendet, um ein Layout zu implementieren, das sich an verschiedene Bildschirmbreiten anpasst:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }
    
    .box {
      width: 20vmin;
      height: 20vmin;
      background-color: orange;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir Wenn Sie ein Container-Div verwenden, platzieren Sie die vier Box-Divs in einer Reihe mit einem Abstand von 5 Pixeln dazwischen. Die Breite und Höhe des Felds betragen jeweils 20 % des kleineren Werts aus Breite und Höhe des Ansichtsfensters. Das bedeutet, dass die Boxen unabhängig von der Bildschirmbreite proportional passen.

Zusammenfassung
Die CSS-Viewport-Einheiten vw und vmin können uns dabei helfen, das Ziel zu erreichen, uns beim Entwerfen von Webseiten an unterschiedliche Bildschirmbreitenlayouts anzupassen. Durch die Verwendung dieser Einheiten können wir ein responsives Design erreichen, indem wir die Größe und das Layout von Elementen basierend auf den Abmessungen des Ansichtsfensters anpassen. Unabhängig davon, ob der Benutzer einen großen Bildschirm, einen Laptop oder ein mobiles Gerät verwendet, sorgen wir dafür, dass Ihre Webinhalte schön aussehen und gut präsentiert werden.

Hinweis: Bei der Verwendung von vw- und vmin-Einheiten müssen Sie die Kompatibilitätsprobleme verschiedener Browser berücksichtigen, um eine korrekte Anzeige auf verschiedenen Geräten sicherzustellen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Viewport-Einheiten vw und vmin, um das Layout an unterschiedliche Bildschirmbreiten anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!