Как вы используете в вёрстке единицы измерения vh и vw?

Question

[Islam Ibakaev]

хотелось бы услышать:
1) про реальные "use cases"
2) практические советы по использованию

Answer 1

[Ivan Bogachev]

Первый use case: Truly Fluid Typography With vh And vw Units

Разные полезные штуки делаются через vw очень просто. Оставлю пару демок из своих ответов на другие вопросы, а вы посмотрите на досуге:
сетка из квадратов
скошенная секция
округлости большого диаметра

Ну и vh бывает полезно:
приделанный к низу footer

Answer 2

[dom1n1k]

Как? С матами :)
Единицы мегаполезные, но у них есть один неприятный нюанс - размер вьюпорта считается включая полосу прокрутки.
Это не баг, это так и должно быть по спецификации. И тому есть свои причины, почему сделано именно так.
Но на практике в очень большой части случаев это неудобно. Это рушит всю идею.
Ну типа отступили с двух боков марджины по 5vw - значит в середине контент 90vw? А вот фиг там - иногда это так, а иногда нет. Приходится придумывать дикие комбинации медиа-запросов и calc-ов.

Реальные юзкейсы?
Ну вот буквально вчера ситуация. Карусель, в которой крутятся влево-вправо некие блоки. И хочется, чтобы в ширину страницы помещалось целое количество блоков. Условно говоря, на планшете 2, на ноуте 3, на десктопе 4. То есть ширина блока должна составлять 50, 33 и 25% соответственно. Но в процентах указывать нельзя! Потому что карусельная либа оборачивает всё это дело в свои врапперы и проценты будут считаться не от экрана, а от этих врапперов. Флекс там тоже не подходит. Ну вот vw это спасение (за исключением вышеописанного нюанса).

Ещё я приспособился в некоторых ситуациях привязывать размер шрифта к vmin.

Answer 3

[xmoonlight]

vw/vh, vmin/vmax - нужны в основном для "резиновых" горизонтальных/вертикальных "живых" блоков (например, слайдер или wizard-опросник на лэндинге, и т.п.), соблюдение масштабируемых "резиновых" пропорций блоков или "резиновой" вёрстки одностраничных SPA-приложений: сервисов/игр, которые не нуждаются в скроллинге контента, а вся навигация - происходит исключительно в самом приложении/блоке и без смещения viewport-а, т.к. приложение/блок - занимает весь viewport (или же, всю его ширину или высоту).