Эти новые единицы измерения были основаны на уже существующих единицах измерения, как vw, vh, vmin, vmax. Но так как мы в этом курсе их не проходили, то давайте сперва разберем vw, vh, vmin, vmax, а потом уже изучим svh, lvh, dvh.
Допустим у нас есть такая простая веб страница:
В СSS сразу удалю поля по умолчанию, чтобы они не мешались, и зададим абзацу жёлтый фон:
Теперь давайте зададим ширину абзаца, чтобы он занимал все видимое окно браузера. Для этого нам и пригодятся такие единицы измерения как vw и vh. Они очень похожи на проценты, только родительским элементом для них выступает окно браузера, где 1vw равен 1% ширины окна браузера, а 1vh равен 1% высоты окна браузера.
Т.е. здесь мы указываем чтобы абзац занимал 100% ширины и высоты браузера.
А что будет, если в качестве высоты мы установим 120vh, т.е. высота абзаца будет на 20% выше, чем окно браузера. Должна появиться вертикальная полоса прокрутки, но влияет ли эта полоса прокрутки на ширину абзаца. Давайте попробуем!
Как видите, у нас появилась как вертикальная, так и горизонтальная полоса прокрутки, а это значит, что сама полоса прокрутки не учитывается размером vw или vh, и при значении width: 100vh, если есть вертикальная полоса прокрутки, то она закроет хоть и небольшую, но часть тега абзаца. Такая же проблема наблюдается и на мобильных браузерах, где строка с адресом сайта и другие элементы интерфейса не учитываются vw и vh.
Также мы можем ширине тега задать vh, а высоте vw. Тогда получится, например, при свойстве width: 50vh, что ширина тега будет равна 50% от высоты окна браузера.
Единица измерения vmin задает размер от меньшей стороны окна браузера (или точнее, надо говорить вьюпорта). Если высота меньше ширины окна браузера, то расчёт будет вестись относительно высоты. Единица vmax работает наоборот.
И вот мы дошли до новых единиц измерения:) И они касаются только высоты.
Единица измерения lvh (long vieport height, можно перевести как “самая длинная высота вьюпорта”) работает также как vh, т.е. страница не учитывает различные элементы интерфейса браузера для задания высоты. Как я думаю, в будущем единицу измерения vh посчитают устаревшей, и будут использовать lvh. Но это мои догадки.
Единица измерения svh (small vieport height) уже учитывает элементы интерфейса браузера, и при задании размера в 100svh, размер тега не будет находится, например, под адресом страницы мобильного браузера.
А единица измерения dvh (dynamic vieport height) будет переключаться между svh и lvh. Т.е. если есть у браузера различные элементы интерфейса, которые могут помешать полному отображению тега, то dvh переключается на svh. А если таких элементов нет, то dvh переключается на lvh. И самое замечательное, что dvh может переключаться “на ходу”. Т.е. вы открыли мобильный браузер с адресной строкой и dvh переключился на svh, а потом вы решили прокрутить страницу вниз (в этот момент адресная строка обычно пропадает) и dvh сразу же переключился на lvh.