Μονάδες vw και vh στο CSS

Οι μονάδες vw και vh επιτρέπουν τον ορισμό του μεγέθους σε σχέση με την περιοχή προβολής του παραθύρου του προγράμματος περιήγησης. Ας δούμε ένα παράδειγμα.

Ας υποθέσουμε ότι έχουμε ένα div:

<div></div>

Ας ορίσουμε πλάτος ίσο με το μισό του πλάτους της περιοχής προβολής και ύψος ίσο με το μισό του ύψους της περιοχής προβολής:

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

Ας δούμε τι θα πάρουμε:

Δίνεται ένα div. Ορίστε του ένα περιθώριο από πάνω, ίσο με 30% του ύψους της περιοχής προβολής.

Δίνεται ένα div. Ορίστε του πλάτος και ύψος, ίσο με 70% του πλάτους της περιοχής προβολής.