#заметка дня
Вы наверняка заметили, что призывы отказаться от пикселей звучат всё чаще и чаще. Я не буду сейчас описывать плюсы и минусы перехода на относительные единицы, я покажу простейшее решение.
Любителям шлюзов будет другая статья. Хотите — обсудим в
чате.
vw+vhИтак, вам кровь из носу нужно, чтобы сайт был абсолютно резиновым и реагировал на изменение размера окна пропорционально. Прочитали, что нужно использовать
vw (viewport width) или
vh (viewport height).
1vw это 1% от ширины видимой области экрана включая скроллбар, 1vh от, соответственно, высоты. Я рекомендую
vw, ибо чаще всего, ширина макета это константа (я про макеты! не про результат, ниже поясню).
Теперь такой простой, но такой сложный секрет: чтобы ваши блоки изменяли размер пропорционально изменению ширины или высоты окна,
нужно использовать что-то одно.
Единицы
vh и
vw – разные по определению! Прямоугольник 10vw на 10vh это не квадрат! Если вы изменяете ширину окна, высота-то остаётся постоянной. И наоборот.
Второе: если уж взялись, то используйте их везде: размер блоков, шрифта, отступы, поля, базис – всё должно быть или в v-единицах (или в процентах, кто понимает). Это же касается, впрочем, и
rem.
Третье: чтобы не сидеть с калькулятором (знаю таких кадров лично), я предлагаю воспользоваться следующей функцией для SCSS:
$base-width: 1920;
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
@function vw($num) {
@return strip-unit($num) / $base-width * 100vw;
}
Пример:
.my-block {
width: vw(100px);
padding: vw(20px);
}
100px это ширина блока на макете 1920px. Не при разрешении экрана в 1920 по ширине, а на вашем макете от дизайнера. То есть: 100px ➗ 1920px ✖️ 100vw, по формуле простых процентов.
Многих смущает функция strip-unit. Мол, там же единица получается в знаменателе.
Нет, ребята. Не единица. По правилам SCSS 20px ➗ 1 = 20px, а 20px ➗ 1px = 20. Это простая алгебра дробей. Ну и соответственно, 20px ✖️ 100vw не имеет никакого смысла, а 20 ✖️ 100vw — имеет. Не умножайте сантиметры на килограммы (и не смейтесь над мемами с учителями).
Четвёртое: не забывайте про скроллбар, он ненулевой ширины, но при расчёте v-единиц не учитывается.
Пятое: сайт, свёрстанный таким образом, перестаёт зумиться на десктопах. Зато на мобильных – просто сказка, горячо рекомендую.
И шестое: в какой-то момент сайт станет просто мелким :)
remС
rem (root em), единый размер шрифта корневого элемента,
html, верны ровно всё те же утверждения и применима всё та же формула:
$base-font: 16;
@function rem($num) {
@return strip-unit($num) / $base-font * 1rem;
}
Пример:
.my-block {
width: rem(100px);
padding: rem(20px);
}
Почему 16? Потому что 16px это размер шрифта тега
html по-умолчанию в любом браузере. Не надо ставить 62.5% на
html в надежде получить 10px, я вас умоляю! Да, числа выглядят красиво, но в вашу логику кому-то ещё въехать предстоит. Что понятнее, 10rem из 62.5% или rem(100px)?
Хотя ладно, тут кому как.
Главное: не ставьте
никогда размер шрифта
html в px, вы потеряете всю красоту доступности
rem для людей, которые изменяют размер шрифта браузера по-умолчанию.
К плюсам
rem точно можно отнести возможность изменять размер всего сайта простым переключением размера шрифта. Например, на сайте Минэкономразвития РФ так сделана панель для слабовидящих (но ошибка с 16px в корне присутствует).
Второй плюс: когда дизайнер неопытный, он запросто может вам прислать макет в 1440px, например. А большинство экранов имеют размер 1280 и 1366. Не каждый макет можно аккуратно адаптировать. И вот тут магия быстрого изменения масштаба очень нужна. Меняете себе размер шрифта по медиа-запросам и готово.
Минусы – зум будет работать, но не очень адекватно.
Шлюзы,
em, правильную резину и проценты я рассмотрю как-нибудь позже.
Краткий выводВерстать
весь сайт в
vh и
vw имеет смысл только если у вас реально что-то сложное, с большим количеством просчитанных заранее взаимодействий.
Когда верстаете в px (всё же они проще), шрифт вполне можно указывать в
rem, а отступы — в
em.
#css #em #rem #vh #vw
