Gregory's Server
Новые единицы измерения в CSS о которых я не знал
Очень актуально для адаптивных дизайнов. Многие кто разрабатывает адаптивный вариант приложения использует такую единицу измерения как vh, простыми словами высота видимой области, где 1vh равен 1% высоты видимой области. Но есть проблема с vh, в мобильных версиях не учитывается размер браузерной навигации. Сейчас браузеры при использовании стараются максимально освободить пространство, сдвигаю навигацию из поля зрения. И vh с этим не справляется, он не умеет определять динамическую навигацию, от этого появляются проблемы со стилями.
И тут нам на помощь приходят новые единицы измерения, вот они слева направо: svh, lvh, dvh.
Если в кратце че каждый делает:
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.
Все единицы измерения имеют хорошую браузерную поддержку (https://caniuse.com/?search=svh%2C%20lvh%2C%20dvh). Примеры можно глянуть на картинке ниже.
А вообще новых единиц дохрена и больше, можно почекать здесь (https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/), я рассказал ток про самые главные и важные для меня 🤡
#css #frontend
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.