CSS-Einheiten vw und vh

Die Einheiten vw und vh erlauben es, die Größe relativ zum Viewport des Browserfensters festzulegen. Schauen wir uns ein Beispiel an.

Nehmen wir an, wir haben ein Div:

html<div></div>

Lassen Sie uns ihm eine Breite von der Hälfte der Viewport-Breite und eine Höhe von der Hälfte der Viewport-Höhe geben:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

Schauen wir uns an, was wir erhalten haben:

Задание 1

Ein Div ist gegeben. Weisen Sie ihm einen oberen Abstand zu, der 30% der Viewport-Höhe entspricht.

Задание 2

Ein Div ist gegeben. Weisen Sie ihm eine Breite und Höhe zu, die 70% der Viewport-Breite entspricht.