Mire használják a vh és vw mértékegységeket a CSS-ben a méretek megadásakor?

A CSS-ben a vh és vw mértékegységek a böngésző nézetablakának (viewport) méretéhez viszonyított méretek megadására szolgálnak.

• vh (nézetablak magassága): A nézetablak magasságának 1%-át jelenti.
• vw (nézetablak szélessége): A nézetablak szélességének 1%-át jelenti.

Fő céljuk az adaptív tervezés létrehozása, ahol az elemek méretei a böngésző aktuális ablakméretétől függenek, nem pedig fix pixelértékektől vagy a szülőelemek méretétől. Ez lehetővé teszi olyan elemek, például teljes magasságú vagy szélességű szekciók, betűtípusok, képek és más komponensek könnyű méretezését, biztosítva a kényelmes megjelenítést különböző képernyőméretű eszközökön.

Például:

• height: 100vh; — az elem magassága a nézetablak magasságának 100%-a lesz.
• width: 50vw; — az elem szélessége a nézetablak szélességének 50%-a lesz.