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

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

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

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

svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.

lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.

dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.

Все единицы измерения имеют хорошую браузерную поддержку. Примеры можно глянуть на картинке ниже.

А вообще новых единиц дохрена и больше, можно почекать здесь, я рассказал ток про самые главные и важные для меня 🤡