Dimenzioniranje z CSS3 vw in vh enotami

Pri CSS-ju imamo na voljo več različnih enot za dimenzioniranje, in sicer: px, pt, em in rem. Poznamo pa še dve drugi, in sicer: vw in vh.

Velikokrat pri izdelavi strani naletimo na posamezne elemente za katere bi želeli, da se prilagodijo prostoru, ki ga imajo na voljo. Običajno se pri teh prijemih uporablja JavaScript s katerim najprej preverimo velikost prikazanega polja in temu primerno priredimo element. Če velikost brskalnika uporabnik spremeni se postopek ponovi.

Z uporabo enot vw in vh lahko elemente dimenzioniramo na velikost prikazanega polja. Pri enotah vw in vh je pomembno, da poznamo logiko delovanja, in sicer 1 enota predstavlja 1/100 dimenzije prikaza polja. V praksi to pomeni, če želimo element, ki zavzame celotno širino polja uporabimo width: 100vw za širino in height: 100vh za višino.

Primer uporabe vw ali vh enot v praksi bi bil za prikaz slik, v primerih, ko želimo da se velike slike prilagodijo prikazanemu polju. Dimenzijo slik bi tako lahko prilagodili z uporabo značke

img {max-height: 90vh;}

Slike tako ne zavzamejo celotnega prikazanega polja, ampak le 90% tega.

Pred uporabo enot vw in vh se prepričajte o njeni podpori v različnih brskalnikih.

Komentiraj


*