So verwenden Sie die CSS-Viewport-Einheiten vw und vh, um ein Layout zu implementieren, das sich an Tablet- und Mobilbildschirme anpasst-CSS-Tutorial-php.cn

So verwenden Sie die CSS-Viewport-Einheiten vw und vh, um ein Layout zu implementieren, das sich an Tablet- und Mobilbildschirme anpasst

PHPz

Freigeben： 2023-09-13 12:26:00

Original

1403 Leute haben es durchsucht

如何使用 CSS Viewport 单位 vw 和 vh 来实现适应平板和手机屏幕的布局

So verwenden Sie die CSS-Viewport-Einheiten vw und vh, um ein Layout zu implementieren, das sich an Tablet- und Mobilbildschirme anpasst.

Beim Entwerfen responsiver Weblayouts müssen wir häufig die Anpassungsprobleme verschiedener Gerätebildschirmgrößen berücksichtigen. Die CSS-Viewport-Einheiten vw (Viewport-Breite) und vh (Viewport-Höhe) bieten eine einfache Möglichkeit, eine Layoutanpassung an Tablet- und Mobilbildschirme zu erreichen.

Die Viewport-Einheiten vw und vh werden relativ zur Breite und Höhe des Viewports berechnet, wobei 1vw 1 % der Viewport-Breite und 1vh 1 % der Viewport-Höhe entspricht. Durch die entsprechende Verwendung dieser Einheiten können wir die Größe und Position von Elementen in verschiedenen Ansichtsfenstergrößen einfach steuern.

Im Folgenden wird detailliert beschrieben, wie Sie mithilfe der CSS-Viewport-Einheiten vw und vh ein Layout implementieren, das sich an Tablet- und Mobiltelefonbildschirme anpasst.

Grundstile festlegen

Bevor wir mit dem Layout beginnen, müssen wir einige Grundstile festlegen, um sicherzustellen, dass sich der Standardstil der Seite an verschiedene Gerätebildschirme anpasst. Zuerst können wir dem Körperelement den folgenden Stil hinzufügen:

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Nach dem Login kopieren

Dadurch werden die Standardränder und -abstände entfernt und das Boxmodell auf das Rahmenboxmodell festgelegt.

Verwenden Sie die Einheiten vw und vh, um die Elementgröße festzulegen.

Beim Entwerfen des Layouts müssen wir die Größenänderungen von Seitenelementen bei unterschiedlichen Ansichtsfenstergrößen berücksichtigen. Zu diesem Zeitpunkt können Sie die Einheiten vw und vh verwenden, um die Größe des Elements festzulegen.

.element {
  width: 50vw; /* 宽度为视窗宽度的 50% */
  height: 30vh; /* 高度为视窗高度的 30% */
}

Nach dem Login kopieren

Indem wir die Breite und Höhe auf relative Einheitswerte festlegen, können wir sicherstellen, dass das Element über verschiedene Ansichtsfenstergrößen hinweg die richtigen Proportionen beibehält.

Elementposition mit vw- und vh-Einheiten festlegen

Zusätzlich zum Festlegen der Größe des Elements müssen wir auch die Position des Elements auf der Seite berücksichtigen. Zu diesem Zeitpunkt können Sie die Einheiten vw und vh verwenden, um die Position des Elements festzulegen.

.element {
  position: absolute;
  left: 50vw; /* 左边距为视窗宽度的 50% */
  top: 25vh; /* 上边距为视窗高度的 25% */
}

Nach dem Login kopieren

Indem wir die Eigenschaften left und top auf relative Einheitswerte festlegen, können wir sicherstellen, dass die relative Position des Elements über verschiedene Ansichtsfenstergrößen hinweg unverändert bleibt.

Layout mithilfe von Medienabfragen anpassen

Durch die Verwendung von Medienabfragen können wir unterschiedliche Stile oder Layouts je nach Bildschirmgröße des Geräts anwenden.

Wenn die Bildschirmbreite beispielsweise weniger als 768 Pixel beträgt, können wir die Größe und Position des Elements anpassen:

@media (max-width: 768px) {
  .element {
    width: 80vw;
    height: 25vh;
    left: 10vw;
    top: 15vh;
  }
}

Nach dem Login kopieren

Auf diese Weise werden Größe und Position des .element-Elements geändert, wenn die Bildschirmbreite weniger als 768 Pixel beträgt entsprechend dem Stil in der Medienabfrage angepasst werden.

Zusammenfassend lässt sich sagen, dass wir durch die Verwendung der CSS-Viewport-Einheiten vw und vh problemlos eine Layoutanpassung an Tablet- und Mobilbildschirme erreichen können. Indem wir die Größe und Position von Elementen auf relative Einheitswerte festlegen und Medienabfragen kombinieren, um sie an die Bildschirmgrößen verschiedener Geräte anzupassen, können wir sicherstellen, dass Webseiten auf verschiedenen Geräten die beste Benutzererfahrung bieten.

Beispielcode:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .element {
      width: 50vw;
      height: 30vh;
      position: absolute;
      left: 50vw;
      top: 25vh;
      background-color: red;
    }
    
    @media (max-width: 768px) {
      .element {
        width: 80vw;
        height: 25vh;
        left: 10vw;
        top: 15vh;
      }
    }
  </style>
</head>
<body>
  <div class="element"></div>
</body>
</html>

Nach dem Login kopieren

Das Obige ist die Methode und der Beispielcode zur Verwendung der CSS-Viewport-Einheiten vw und vh, um ein Layout zu implementieren, das sich an Tablet- und Mobilbildschirme anpasst. Ich hoffe, es wird Ihnen bei Ihrer Layout-Anpassungsarbeit hilfreich sein!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Viewport-Einheiten vw und vh, um ein Layout zu implementieren, das sich an Tablet- und Mobilbildschirme anpasst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!