Для чего используются единицы измерения vh и vw при указании размеров в CSS?

Единицы измерения vh и vw в CSS используются для указания размеров относительно размеров области просмотра (viewport) браузера.

• vh (viewport height): Представляет 1% высоты области просмотра.
• vw (viewport width): Представляет 1% ширины области просмотра.

Их основное назначение — создание адаптивного дизайна, где размеры элементов зависят от текущих размеров окна браузера, а не от фиксированных значений в пикселях или размеров родительских элементов. Это позволяет легко масштабировать элементы, такие как секции во всю высоту или ширину экрана, шрифты, изображения и другие компоненты, обеспечивая удобство просмотра на устройствах с разными размерами экранов.

Например:

• height: 100vh; — делает элемент высотой в 100% от высоты области просмотра.
• width: 50vw; — делает элемент шириной в 50% от ширины области просмотра.