Тонкости фронтенда: Scaling или “резиновая вёрстка”

Всем привет! В этой статье upper-middle frontend developer Ян поделится красивым и простым решением по оптимизации сайтов, с которой сталкиваются многие фронтендеры.

Дано: сайт с необычным дизайном, который должен одинаково эффектно отображаться на устройствах с разными разрешениями экранов. Отдельные элементы дизайна на экранах 4К выглядят слишком мелко, а на экранах мобильных устройств и планшетов – чересчур громоздко.

Как можно было решить проблему?

Существуют два метода.

Можно писать код “по классике”, используя для каждого компонента по три медиа-запроса (для мобильных, планшетных и десктопных устройств), но на выходе мы будем иметь очень длинный и громоздкий код. Это некрасиво, и мы так делать не любим.

Можно делать вёрстку в процентах, но тогда каждый элемент придётся подгонять под родителя, а значит высчитывать проценты и тратить на это уйму времени.

Что сделали мы?

Провели диагностику и поняли, что эти методы не идеальны и не способны полностью устранить проблему. Поэтому решили взять лучшее из каждого метода и создать собственный в виде модернизированной “резиновой вёрстки”.

Резиновой вёрсткой в вебе называют приём, который позволяет создавать масштабируемые сайты, способные подстраиваться под любое разрешение экрана.

Это позволило нам верстать сайт, используя PX (пиксели), но при этом они с успехом конвертировались в VW (относительную единицу измерения), то есть, один раз задав размер в пикселях, мы получили полную поддержку пропорциональности при любом масштабировании.

Нашу “резиновую” функцию мы назвали скейлингом, от слова “scale” – масштабирование. В его основе лежит применение к имеющемуся коду обычного миксина, написанного на SASS. Это позволяет переводить передаваемые ему значения из PX (пикселей) в VW (относительную единицу измерения), а значит – добиваться пропорционального уменьшения/увеличения блоков при любом ресайзе страницы.

Самое крутое достоинство нашего миксина-скейлинга – на выходе мы получаем в три раза меньше кода! Это стало возможным благодаря тому, что вместо прописи трёх и более медиа-блоков, достаточно импортировать миксин в рабочий SASS-файл стилей и передать ему нужные свойства с тремя значениями в PX (пикселях) – для мобильных, планшетных и десктопных устройств.

Смело рекомендую этот метод всем, кто занимается вопросами оптимизации и масштабирования вёрстки для разных разрешений. Метод реально работает, я многократно подтвердил его эффективность на своих проектах.

Буду рад ответить на ваши вопросы и продолжить обсуждение в комментариях!