Будни разработчика

#заметка дня

Вы наверняка заметили, что призывы отказаться от пикселей звучат всё чаще и чаще. Я не буду сейчас описывать плюсы и минусы перехода на относительные единицы, я покажу простейшее решение.

Любителям шлюзов будет другая статья. Хотите — обсудим в чате.

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

👍34🤔8❤7

3.17K viewsedited 07:08