Deoarece exista multe unitati de masura diferite in CSS, deseori iti pui intrebarea: care este cea mai buna varianta in acest moment? Cele mai populare unitati sunt px și %, insa nu trebuie sa ramanem blocati pe ceea ce stim ca mergea odata. Un site ce se poate adapta pe mai multe device-uri simultan necesita folosirea unitatiilor “dinamice” precum vw și vh.

VW si VH sunt unitati de lungime ce reprezinta un % din dimensiunea ferestrei. Pe latime, unitatea de masura este definita ca Viewport Width, respectiv Viewport Height pentru inaltime.

VH poate fi utilizat oriunde, insa cel mai frecvent caz de utilizare al VH este pentru a defini o inaltime completa in functie de inaltimea ecranului (viewport-ului). Practic, putem avea o sectiune cu inaltimea definita 100vh ce mereu va acoperi ecranul, indiferent de dimensiunile monitorului.

Unitatea VW este similara cu WH, dar se axeaza mai mult pe latimea ferestrei decat inaltimea acesteia. VW devine foarte utila daca vrei sa ai o fereastra adaptabila, bazata pe fonturi. De exemplu, o inaltime a fontului atribuita heading-ului h1 este 6% (6vw) din latimea ferestrei. Ca atare, daca latimea ferestrei este 1000px, dimensiunea fontului va fi de 60px, iar daca fereastra se redimensioneaza la 500px, dimensiunea fontului va deveni 30px.

Folosirea acestor unitati ajuta la tranzitia site-ului web pe orice platforma mobile, indiferent de marimea acestora si reprezinta un pas inainte in a-ti face site-ul mai usor de folosit.