пью код пишу пиво
19.07
Новые единицы измерения в CSS о которых я не знал
Очень актуально для адаптивных дизайнов. Многие кто разрабатывает адаптивный вариант приложения использует такую единицу измерения как vh, простыми словами высота видимой области, где 1vh равен 1% высоты видимой области. Но есть проблема с vh, в мобильных версиях не учитывается размер браузерной навигации. Сейчас браузеры при использовании стараются максимально освободить пространство, сдвигаю навигацию из поля зрения. И vh с этим не справляется, он не умеет определять динамическую навигацию, от этого появляются проблемы со стилями.
И тут нам на помощь приходят новые единицы измерения, вот они слева направо: svh, lvh, dvh.
Если в кратце че каждый делает:
svh (Small viewport height) - определяет самый минимальный размер viewport при открытой навигации в браузере.
lvh (large viewport height) - При скрытой навигации задает размеры по самому большому размеру viewport. Максимально возможная высота области просмотра, видимую пользователю.
dvh (Dynamic viewport height) - Динамический размер в зависимости оттого скрыта ли навигация или нет.
Все единицы измерения имеют хорошую браузерную поддержку. Примеры можно глянуть на картинке ниже.
А вообще новых единиц дохрена и больше, можно почекать здесь, я рассказал ток про самые главные и важные для меня 🤡
#css #htmlеще контент в этом сообществе
еще контент в этом соообществе
пью код пишу пиво
19.07
войдите, чтобы увидеть
и подписаться на интересных профи