Новые единицы измерения в CSS о которых я не знал

Очень актуально для адаптивных дизайнов. Многие кто разрабатывает адаптивный вариант приложения использует такую единицу измерения как vh, простыми словами высота видимой области, где 1vh равен 1% высоты видимой области. Но есть проблема с vh, в мобильных версиях не учитывается размер браузерной навигации. Сейчас браузеры при использовании стараются максимально освободить пространство, сдвигаю навигацию из поля зрения. И vh с этим не справляется, он не умеет определять динамическую навигацию, от этого появляются проблемы со стилями.

И тут нам на помощь приходят новые единицы измерения, вот они слева направо: svh, lvh, dvh.

Если в кратце че каждый делает: