K čemu slouží jednotky vh a vw při určování velikostí v CSS?

Jednotky měření vh a vw v CSS se používají k určení rozměrů vzhledem k velikosti zobrazení (viewportu) prohlížeče.

• vh (výška viewportu): Reprezentuje 1% výšky zobrazení.
• vw (šířka viewportu): Reprezentuje 1% šířky zobrazení.

Jejich hlavním účelem je vytvářet responzivní design, kde velikosti prvků závisí na aktuálních rozměrech okna prohlížeče, nikoli na pevných hodnotách v pixelech nebo na velikostech rodičovských prvků. To umožňuje snadné škálování prvků, jako jsou sekce na celou výšku nebo šířku obrazovky, písma, obrázky a další komponenty, což zajišťuje pohodlné zobrazení na zařízeních s různými velikostmi obrazovky.

Například:

• height: 100vh; — způsobí, že prvek bude vysoký 100% výšky zobrazení.
• width: 50vw; — způsobí, že prvek bude široký 50% šířky zobrazení.