VW- ja VH-yksiköt CSS:ssä

Yksiköt vw ja vh mahdollistavat koon asettamisen suhteessa selaimen ikkunan näkymän alueeseen. Katsotaanpa esimerkkiä.

Oletetaan, että meillä on tietty div:

html<div></div>

Asetetaan sille leveys, joka on puolet näkymän leveydestä, ja korkeus, joka on puolet näkymän korkeudesta:

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

Katsotaan, mitä saimme aikaan:

Задание 1

Annettu div. Aseta sille yläreunainen marginaali, joka on 30% näkymän korkeudesta.

Задание 2

Annettu div. Aseta sille leveys ja korkeus, joka on 70% näkymän leveydestä.