Резиновая верстка: универсальная сетка под все брейкпоинты, примеры и правила
Материал предназначен для дизайнеров и Frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
С чего все началось
В 2018 мы перешли на реактивные фреймворки. Наш выбор пал в пользу Vue. Мы используем его в наших проектах чаще всего. Нам понравилась экономия времени и сил за счёт компонентного подхода (HTML, CSS, JS в одном файле). Далее мы решили автоматизировать всё, что только можно автоматизировать.
Раньше, когда компания работала на субподряд, к нам приходили макеты от разных веб-студий (мы застали ещё времена макетов в Photoshop). Сетки в этих в макетах были просто ужасны. Например 12 колонок на десктопе, 10 на каких-то промежуточных разрешениях, и 2 колонки на мобильном. Отступы между колонками могли быть абсолютно разными. Всё это сводило нас с ума, потому что каждое новое разрешение — это как вёрстка нового макета. Никакой экономии, никакой выгоды, постоянно нужно доказывать, что это действительно много работы, но нас никто не собирался слушать, потому что макеты и бюджеты уже согласованы.
Как было раньше
Как работает сейчас
Думая о том, как можно снизить расходы на разработку, делать её быстрее, мы задумались о том, что при переходе от дизайнера к разработке заносится больше всего ошибок для вёрстки. Мы начали их искать, и поняли, что сетки — это самое большое зло, которое может быть в нашей совместной работе.
Например, не понятно, на каких разрешениях дизайнер рисует макет 1440 px и на каких разрешениях переходить на макет 768 px. На 1439 px планшетный макет выглядит плохо. Кроме этого есть и другие базовые разрешения, такие, как 1366 px, 1280 px, 1024 px и т.п. Мы пытаемся делать как-то по своему. В итоге получается цепочка итераций переделок и переработок.
Мы подумали: а почему бы не сделать одну сетку и работать с ней? Ведь это должно не сильно повредить дизайнеру в его работе, но при этом очень сильно облегчит работу верстальщика. Так появилась идея стандартизированных резиновых эластичных сеток.
Резиновая верстка — это когда мы перекладываем работу по адаптации макета под доступную ширину браузера, на сам браузер. Достигается это различными CSS-свойствами и единицами измерения: vw, %. При этом макет очень и очень редко масштабируется.
Резиновым макеты делают только по горизонтали. Если мы делаем резиновую верстку по горизонтали и вертикали, то скорее всего перед нами верстка с изменением масштаба, так называемая масштабируемая верстка, она не перестраивает контент.
То есть создавая резиновую верстку, разработчик даже перестроение макета перекладывает на браузер, чтобы все расчеты производились на стороне браузера, таким образом разработчик может не тратить время на “лишние” стили.
Резиновая (называется так потому что тянется, она жидкая, но при этом возвращается в исходное состояние)
Примеры сеток
Вот образец, как обычно рисуются сетки. На 1920px 12 колонок:
На 1440px — 10 колонок, на 768px — 6 колонок, на 320px 2 колонки
Для нас это плохо. Мы решили уйти от этого.
Мы рисуем десятиколоночную сетку. Её легче считать на вёрстке
Далее сжимаем ширину
Мы видим, что масштабируется только ширина колонок, но не отступы колонок (gutter) и margin по краям. Это не позволяет нам нормально использовать сетку, если просто раскопировать первоначальный вариант и уменьшать ширину макета.
Для максимального масштабирования нам нужно, чтобы менялись и gutter и margin, поэтому мы переходим к ручному масштабированию. Для этого мы используем 10 колонок, margin 40px и gutter 30px.
Рассчитаем размеры в процентах. Берём за основу макет 1920px.
margin 40px займёт: 40 / 1920 = 0,020833333333 = 2,083333%
gutter 30px займёт: 30 / 1920 = 0,015625 = 1.5625%
Ширина колонок 157px: 157 / 1920 = 0,08177083333 = 8,177083%
Для проверки можем сложить все размеры:
10 колонок + 9 gutter + 2 margin
(157 * 10) + (30 * 9) + (40 * 2) = 1920px
Итак, у нас есть процентные размеры:
отступ с краю 2,083333%
отступы между колонками 1.5625%
Рассчитаем размеры на макете 1440px:
ширина колонки: 1440 * 8,177083% = 117,75px
margin: 1440 * 2,083333% = 29,99999px
padding: 1440 * 1.5625% = 22,5px
Таким же образом можно рассчитать размеры на все ширины макетов
сетка на 1024px и 768px 
сетка на 320px
Как мы видим, наша сетка сохранилась. Она просто уменьшилась относительно ширины макета, ширины канваса.
Из всего этого следует, что для резиновой вёрстки нам достаточно всего лишь получить процентные размеры. При этом нам не нужно брать калькулятор и считать эти коэффициенты. Эту работу мы переложим на браузер.
Код для резиновой верстки
Перейдём к практике. Мы используем препроцессор scss и функцию percentage для расчета процентов, чтоб сократить код. Напишем в HTML и CSS следующее: https://codepen.io/danilabr/pen/yLpbxPr
Эти стили дают возможность сделать так, чтоб по нажатию на определённую клавишу на body добавился класс .is-grid и отобразилась данная сетка. Это позволяет не тратить время на pixelperfect, и в то же время в процессе вёрстки следить, чтобы блоки располагались правильно по сетке.
Ширину колонки $grid_width и отступ между колонками $grid_gutter будем считать не относительно общей ширины 1920px, а за минусом отступов слева и справа $grid_margin:
В стилях у сетки отрезаем слева и справа margin:
С помощью градиента зацикливаем отрисовку колонок:
Далее добавим обёртку .wrapper, и положим в него элемент .column-item https://codepen.io/danilabr/pen/LYeyXba
Обратите внимание, значение отступа слева и справа у .wrapper будет правильным на всех разрешениях, нам не нужно писать дополнительные media queries и переопределять это значение. Это огромная экономия времени.
Добавим декоративные стили для .column-item:
Сделаем ширину .column-item равной пяти колонкам. Это можно сделать несколькими способами:
1. Просто измерить ширину 5ти колонок с отступами в макете. Либо сложить ширину колонок руками:
5 колонок * 157px + 4 отступа * 30px = 905px.
(не забываем, что 1920px минус 2 отступа справа и слева по 30px = 1840px).
2. То же самое на чистом CSS:
3. Можно сосчитать 905 / 1840 на калькуляторе (так лучше не писать):
4. Либо, если использовать наши переменные:
Результат всех этих вариантов будет одинаковый:
Подключаем mixin mq, или ошибка брейкпоинтов через переменные
Часто Frontend-разработчики используют в качестве брейкпоинтов глобальные переменные в препроцессоре. Например, основные разрешения: 1920px, 1440px, 1024px, 768px и т.д. Но это загоняет разработчика в очень узкие рамки. Бывает, что возникают ситуации, когда у нас есть промежуточное разрешение: например, 905px. На нём часто не влезает текст, например, слишком длинное слово.
Самое быстрое решение — уменьшить размер текста. Если для этих нестандартных точек заводить дополнительные переменные, то это плохой путь. Этих переменных может быть очень много. В том числе, поэтому мы не используем bootstrap.
Мы хотим себе оставить свободу использовать разные значения брейк поинтов. Для этого мы используем миксин mq(), который выглядит следующим образом:
Миксин принимает 2 параметра. Второй — опциональный. Если передаётся только один параметр, то используется подход desktop first, если 2, то mobile first.
Добавим к предыдущему примеру mixin mq и брейкпоинт 768px.
При ширине экрана менее 767px ширина .column-item станет равна 4м колонкам + 5px.
Слайдер с динамической высотой
Измените ширину экрана, и увидите, как фотографии по разному вписываются в нашу сетку. В комментариях указаны подсказки, откуда берутся ширины, которые мы используем. Обратите внимание, что эти стили позволяют нам сохранять правильные пропорции фотографий на всех размерах экрана:
Разрешение экрана более 1280px 
Разрешение экрана менее 1280px 
Разрешение экрана менее 768px
Два блока в резиновой сетке
Продемонстрируем три варианта вёрстки для размещения двух блоков в сетке. Результат будет одинаковый:
Разрешение экрана более 1024px 
Разрешение экрана менее 1024px
1. Первый способ с помощью display: flex; https://codepen.io/danilabr/pen/LYeLWzN
При разрешении менее 768px padding у блоков сделаем резиновым
с помощью padding: percentage(20 / (320 — 7 * 2));
2. Второй способ использует display: grid; https://codepen.io/danilabr/pen/QWagmxg
Grid в принципе позволяет писать меньше кода. Также следует отметить, что в данном случае мы можем использовать резиновый padding у блоков на всех разрешениях экрана, потому что grid делает расчёт процентов для padding от ширины ячейки, а не от всего контейнера, как в предыдущем способе.
Но, в таком случае на очень больших разрешениях экрана padding будет больше, чем на макете. Мы у себя в компании решили, что это нормально, что это добавляет живости макету. Конечно же, такие правки необходимо согласовывать.
3. В третьем способе мы полностью отказываемся от media queries. Современный frontend позволяет делать и такое. https://codepen.io/danilabr/pen/wvpejWr
Для этого в html нам пришлось добавить обёртки над тэгом <p>. Основная логика заключена в следующей строке:
flex: max(482px, (100% / 2 — #
Здесь используется flex-basis и нативная функция css max. На разрешениях, на которых размер колонок меньше 482px будет использоваться второй параметр функции (100% / 2 — #
Растягиваются колонки на всю ширину за счёт flex-basis, переносятся на следующую строку за счёт flex-wrap. В данном случае мы все расчёты переносим на сторону браузера.
В заключение, хочется написать список основных постулатов, которые позволят делать резиновую вёрстку быстро, качественно и надёжно:
Как можно больше использовать проценты.
Как можно больше использовать формулы автоматического рассчёта размеров.
Как можно больше использовать коэффициенты.
Как можно больше использовать grid.
Искать способы написания меньшего количества стилей, для того, чтобы переложить работу для рассчёта размеров на браузер.
Для корректного отображения всех изображений использовать cover или contain.
Принципы резиновой верстки сайта
Резиновый веб-дизайн с HTML5 и CSS3 позволяет нам создавать веб-страницы, которые способны адаптироваться согласно ширины окна браузера. HTML5, CSS3, JS позволяет более быстро превратить ваш сайт в резиновую модель.
Для создания резиновых веб-страниц, мы должны знать, как работать с: резиновым макетом, резиновой шириной, резиновыми: текст и изображения, видео и ифреймы, резиновые: margin и padding, таблицы и формы, адаптивное меню.
Методы верстки резиновых веб-страниц.
Основной идеей для создания резинового макета с HTML5 и CSS3 является определение размеров элементов страницы в процентах или EMs, что позволяет элементам веб-сайта атоматически изменять размер в соответствии с размером окна браузера.
Для создания резинового макета используется формула: target ÷ context = result
- target — размер шрифта(или ширины) которые мы имеем в пикселях(ширина рассчитывается в % и размер в em)
- context — размер шрифта, если он не задан для body то можно к примеру использовать тот который установлен по умолчанию(для Mozilla это 16px).
- result — результат который мы получим в em или %
В общем, преобразования размера элемента с пикселей в проценты или EMs делается относительно его родительского элемента, смотрите примеры:
В данном примере видим что при условии если мы хотим сделать размер текста для header h1 font-size: 18px; и line-height: 20px; нам необходимо расчитать размер в EM согласно его родительского элемента, то есть body: font-size: 13px; line-height: 18px; в резултате получаем font-size:1.384615384615385em; и line-height:1.111111111111111em;
Резиновые: макет, ширина, margin и padding.
Создаём section, где мы расположим два asides:
В этом примере вы видите, что у нас есть section с максимальной шириной: 83em эквивалентной 1328px и внутри мы имеем два блока каждый с шириной: 47%, и если мы изменяем размер экрана браузера наши внутренние блоки всегда будут иметь ширину: 47% и padding: 1%
Текст и изображения в резиновой верстке
Этот метод CSS позволяет изменять размер изображения автоматически в соответствии с размером экрана, текст каждого элемента на веб-сайте может быть задан персонально, так как для всего документа задан размер шрифта font-size:100%.
Резиновый дизайн: формы, таблицы, меню
Пример адаптивной контактной формы.
Для создания таблиц и меню у нас есть две возможности: первая заключается в использовании JS(JQuery), и вторая с помощью Media Queries заточить свой сайт под свои нужды.
Создать резиновую таблицу можно следующим способом:
В случае, если некоторые элементы страницы не имеют размер в процентах, то есть имеют фиксированный размер: списки или боковая навигация. В этом случае для избежания того чтобы сайт не предстал в неприглядном виде на экранах с большим и малым разрешениями, в этих случаях задаётсяmax-width и min-width, чтобы вашим сайтом могли пользоваться пользователи без каких-либо проблем.
С HTML5 и CSS3 мы имеем больше шансов для создания резиновых веб-страниц. Использование Media Queries которые поддерживаются всеми новыми браузерами и если мы хотим чтобы IE 6-8 также мог поддерживать Media Queries мы можем добавить js-скрипт respond.js для Drupal(работает только при включенной опции Объединение и сжатие файлов CSS) или загрузить с GitHub для использования с различными CMS respond.js. Медиа-запросы позволяют при помощи простых деклараций CSS в таблице стилей определить, какой размер будет иметь элемент страницы в зависимости с изменением окна браузера, например:
Эта декларация определяет, что при уменьшении экрана браузера менее 600px DIV с ID#art_gallery эквивалентен ширине 100%.
Кроссбраузерность резинового(отзывчивого) веб-дизайна
Позиционирование элементов для Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari
При позиционировании элементов веб-сайта мы можем заметить разницу в 1px в различных браузерах, но так как принято в большинстве случаев для отзывчивого дизайна задавать размер в условных единицах EMs то решением для коректного позиционирования элементов веб-страницы является использование десятых и сотых долей единиц измерения.
Пример 1: значение margin-top: 2.01em; для какого либо элемента веб-страницы будет отображать данный элемент одинаково во всех браузерах, но если задать margin-top: 2em; то в Mozilla Firefox мы увидим что позиционирование отличается от того как будет расположен данный элемент в Internet Explorer, Google Chrome, Opera, Safari
Пример 2: значение line-height: 27.3px; для шрифта кнопок во всех браузерах отображается одинаково, но если задать line-height: 27px; то в Internet Explorer мы увидим незначительную разницу с тем как данное значение срабатывает в Google Chrome, Mozilla Firefox, Opera, Safari
Шрифты для стандартного отображения в различных браузерах
Для всех версий браузера Internet Explorer от компании Microsoft можно использовать следующие шрифты семейства Sans-serif: Calibri, Candara, Corbel, Cambria, Constantia.
Для Mac OS и её предшественников наиболее совместимы Monaco, Geneva, Myriad, Skia, но последняя версия Safari поддерживает практически все шрифты
Для unix/linux могут быть использованны DejaVu Sans, DejaVu Serif, DejaVu Sans Mono, Garuda, но не стоит забывать что все браузеры любой операционной системы поддерживают все стандартные шрифты как: Arial, Verdana, Tahoma и т.д
Тонкости фронтенда: Scaling или “резиновая вёрстка”
Дано: сайт с необычным дизайном, который должен одинаково эффектно отображаться на устройствах с разными разрешениями экранов. Отдельные элементы дизайна на экранах 4К выглядят слишком мелко, а на экранах мобильных устройств и планшетов – чересчур громоздко.
Как можно было решить проблему?
Существуют два метода.
Можно писать код “по классике”, используя для каждого компонента по три медиа-запроса (для мобильных, планшетных и десктопных устройств), но на выходе мы будем иметь очень длинный и громоздкий код. Это некрасиво, и мы так делать не любим.
Можно делать вёрстку в процентах, но тогда каждый элемент придётся подгонять под родителя, а значит высчитывать проценты и тратить на это уйму времени.
Что сделали мы?
Провели диагностику и поняли, что эти методы не идеальны и не способны полностью устранить проблему. Поэтому решили взять лучшее из каждого метода и создать собственный в виде модернизированной “резиновой вёрстки”.
Резиновой вёрсткой в вебе называют приём, который позволяет создавать масштабируемые сайты, способные подстраиваться под любое разрешение экрана.
Это позволило нам верстать сайт, используя PX (пиксели), но при этом они с успехом конвертировались в VW (относительную единицу измерения), то есть, один раз задав размер в пикселях, мы получили полную поддержку пропорциональности при любом масштабировании.
Нашу “резиновую” функцию мы назвали скейлингом, от слова “scale” – масштабирование. В его основе лежит применение к имеющемуся коду обычного миксина, написанного на SASS. Это позволяет переводить передаваемые ему значения из PX (пикселей) в VW (относительную единицу измерения), а значит – добиваться пропорционального уменьшения/увеличения блоков при любом ресайзе страницы.
Самое крутое достоинство нашего миксина-скейлинга – на выходе мы получаем в три раза меньше кода! Это стало возможным благодаря тому, что вместо прописи трёх и более медиа-блоков, достаточно импортировать миксин в рабочий SASS-файл стилей и передать ему нужные свойства с тремя значениями в PX (пикселях) – для мобильных, планшетных и десктопных устройств.
Как сделать резиновую верстку. Резиновая верстка на div-ах
Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.
У каждого из этих решений есть свои плюсы и минусы, хочу заострить внимание на минусах, так как обычно именно между двух зол именно в отражении минусов этих решений приходится выбирать.
Фиксированная ширина макетной сетки
«Резиновая» макетная сетка по ширине окна
Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.
Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.
Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе , для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.