Enheter vw och vh i CSS

Enheterna vw och vh låter dig sätta storleken relativt webbläsarens fönsters visningsområde. Låt oss titta på ett exempel.

Låt oss säga att vi har en div:

html<div></div>

Låt oss ge den en bredd på hälften av bredden på visningsområdet och en höjd på hälften av höjden på visningsområdet:

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

Låt oss se vad vi fick:

Задание 1

Du har en div. Sätt en toppmarginal som är lika med 30% av visningsområdets höjd.

Задание 2

Du har en div. Sätt en bredd och höjd som är lika med 70% av visningsområdets bredd.