Гайды

Ремы, скейлинг, масштабирование - прием в верстке, когда на определенных разрешениях интерфейс выглядит одинаково, все элементы уменьшаются/увеличиваются пропорционально ширине экрана (на видео для разрешений выше 1920px включены ремы).

Единица rem задает размер элемента относительно размера шрифта , но в нашем случае она еще должна зависит от ширины экрана. Чтобы упросить и автоматизировать верстку на ремах, создаются функции scss и вводятся определенные правила для написания размеров в стилях.

Настройка

1. Подключается файл functions.scss, где прописываются функции для вьюпортов.

2. Создается функция size(), в которую передается переменная $size-in-px: размер элемента в пикселях делится значение шрифта, которое прописано для html (оно вынесено в переменную $fz-default), умножается на 1rem (чтобы получить в итоге значение в ремах).

3. Создается функция size-desktop(), которая отвечает за то, какое разрешение выбрано эталонным, и добавляет зависимость от изменения ширины вьюпорта.

Эталонное разрешение - это то разрешение, которое взято за основу для скейлинга. На любом разрешении сайт будет выглядеть как на эталонном, только пропорционально больше/меньше.

4. В файле reboot.scss у html переопределяем font-size под функции ремов с помощью функции size-desktop(). Функция служит исключительно для обозначения шрифтов в html, и больше на проекте нигде не используется.

5. Все значения, у которых единица измерения px, пишем в формате size().

В том числе для line-height тега html.

Для .container также обязательно пропишите значения в size().

Чтобы на разрешении ниже 1920 сайт вел себя как обычно, на нужных вьюпортах размер шрифта необходимо переопределить. Есть два варианта:

• для @vp-1919 (который означает @media (max-width: 1919px)) переопределяются значения на обычные пиксельные прямо для тега html.

  
  Плюсы
  • более гибкая настройка масштабирования: мы можем какие-то элементы сделать фиксированными, а какие-то масштабируемыми;
  • в инспекторе все значение в пикселях.
  
  Минусы
  • переопределение занимает больше времени;
  • увеличивает количество кода.

Результат

После всех манипуляций у нас должен получится вот такая страница.

Обратите внимание, при разрешении 1920+ все элементы, все отступы, все бордеры пропорционально увеличиваются/уменьшаются, ниже 1920px сайт становится обычным “резиновым”. Если бы у нас не было ремов, сайт вел бы себя вот так:

Проверь себя

На пограничный точках перестроения размеры должны соответствовать макетным. Например, в макете на 1920px шрифт указан 24px. При адаптиве в точке 1920 шрифт также должен быть 24px.

Запись размеров

Главная особенность ремов: все пиксельные размеры должны быть прописаны в css по виду size(). Особенно это касается иконок svg и картинок. Иначе может получиться ситуация, что весь контент, написанный на ремах, увеличится, а картинка, у которой размеры не заданы, останется такой, какой и была

Если нужно вычислить, например, ширину с помощью calc(), то запись выглядит так:
width: calc((100% - #{size(160px)}) / 2);
Не забывайте указывать в ремах значение ширины бордеров: border: size(1px) solid white;

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

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

Но что делать, когда у нас единообразный список, содержащий иконки разного размера?

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

План действий:

1. Просматриваем все иконки списка и выбираем самое большое значение по ширине и высоте. У нас это значение получилось 43px*42px.

2. Создаем фрейм с полученными параметрами, убираем у него белую заливку.

3. Выделяем иконку, копируем ее (CTRL + V), становимся на фрейм и вставляем иконку туда (ctrl + c).

4. Иконка помещается внутрь фрейма. Там ее можно передвинуть в нужную сторону, чтобы при вставке в список она смотрела органично.

5. Но фрейм при экспорте может создавать лишнюю обертку.

Чтобы этого избежать, надо иконку поставить рядом с фреймом. Для этого выделяем фрейм и нажимаем ctrl + g (или кликаем правой кнопкой мышки по фрейму и выбирает Group Selection).

6. Заходим в созданную группу и ставим в ней нашу иконку над фреймом.

7. Теперь экспортируем всю группу - и у нас получилась иконка унифицированного размера.

Теперь мы можем в разметке всем иконкам этого списка указать одинаковый размер, а в css задать масштабируемые ширину и высоту.