vw

vw - это один из видов относительных единиц, и он определяется как 1/100 viewport. Или, проще говоря, этот вид зависит от ширины экрана. 100vw - это ширина всего экрана.

В данном примере мы видим, что мы задали 23vw для каждого из блоков, что почти что четверть от экрана. Если убрать padding и выставить 25vw - то собственно 4 блока займут всю ширину экрана. Кстати, тут как раз есть интересная фича о том, как делать квадратные блоки (как любят в сайтах-портфолио).

Пример блоков на vw

vh

Суть vh аналогична vw, но только расчет идет на высоту устройства.

Как пример использования такого метода - это если нужно сделать первый блок (или все) сайта под устройство. Далее рассмотрим еще в примере с scss-функциями.

vmin

1vmin равен 1% от минимального значения ширины или высоты области просмотра. Данные единицы измерения удобнее всего использовать конечно же в мобилке, т.к. vw и vh будут выдавать слишком мелкие значения. Далее на примерах рассмотрим еще.

SCSS-функции

Теперь самое интересное в этой статье - это использование функций. Кстати, их можно написать и на sass, не проблема.

@function vw($value, $size: 1920) {
@return $value / $size * 100vw;
}

Собственно, функция. Эта функция отвечает за vw. Мы видим переменную $size, значение которой 1920. Это - ширина макета. Предположим, вам дали макет на верстку шириной 1440 - вписываете сюда 1440. И если в макете размер шрифта, к примеру, 10 пикселей - собственно ставим font-size: vw(10); Таким образом, на 1440 (установленном $size) будет размер шрифта 10, а больше/меньше - будет больше или меньше соответственно. Это крайне удобно в плане адаптива под разные десктопы - от 1025 до 1920, или еще выше.

Собственно, с vh-функцией, суть та же. Но область применения поуже.

@function vh($value, $base: 768) {
@return $value / $base * 100vh;
}

Здесь суть та же, но чуть-чуть другая функция. А использование - по ситуации, если сайт сделан по дизайну так, что обязательно зависит от высоты - используем vh. Важно, при разработке сайта естественно нужно выставлять в браузере высоту, которую задали в функции, чтобы vh(10) выглядели как 10px.

Ну и последнее - это vmin. Его использовать стоит, как я уже говорил, для мобильных устройств.

@function vmin($value, $base: 375) {
@return $value / $base * 100vmin;
}

По сути, суть функции абсолютно та же. Если мобильный макет 375 - выставляете 375 и используете vmin(10), к примеру.

Собственно, это самая важная информация по данным единицам + использование в контексте scss-препроцессора. Я не так давно начал использовать данные функции, но скажу однозначно - с ними гораздо приятнее верстать. Если делаешь все правильно - имеешь прекрасный адаптив на любой ширине устройства.

Надеюсь, вам было полезно. Спасибо!