Сайт бюро адаптируется для трёх ключевых типов устройств. Мы считаем «мобильными» экраны с шириной менее 960 пикселей, «лаптопами» — экраны с шириной от 961 до 1400 пикселей, «десктопами» — экраны с шириной от 1401 пикселя. Десктопы идут отдельно, потому что так проще поддерживать версии для больших экранов:

На мобильных
На лаптопах
На десктопах на первом этаже умещаются сразу три проекта

В каждой версии у сайта есть поля: 20 пикселей на мобильных, 6% на лаптопах и десктопах. Тексту достаётся либо вся ширина экрана, либо 11 из 16 колонок на лаптопах и десктопах. Соответственно, если открыть совет на экране с шириной в 2560 пикселей, ширина текстовой полосы будет равна 1543 пикселям:

6%
153,6 пк
11/16
1543,175 пк
5/16
691,625 пк
6%
153,6 пк
6%
153,6
11/16
1543,175
5/16
691,625
6%
153,6

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

Чтобы это исправить, мы стали ограничивать максимальную ширину сайта: на лаптопах — 1100 пикселями, на десктопах — 1400 пикселями. Само ограничение делается не с помощью max‑width, а с помощью «динамических» полей, которые ужимают содержимое до нужного размера.

Скажем, если на экране с шириной в 2000 пикселей мы хотим, чтобы содержимое занимало 1400 пикселей, поля надо задать равными 300 пикселям — половине разницы между шириной экрана и ограничением.

При это поля не могут быть меньше 6%. Значит, динамические поля должны включиться в тот момент, когда они совпадут со статическими. Это даёт нам уравнения:

// Для десктопа
(x - 1400) / 2 = 0,06x
x - 1400 = 0,12x
0,88x = 1400
​
x = 1590,(90)
// Для лаптопа
(x - 1100) / 2 = 0,06x
x - 1100 = 0,12x
0,88x = 1100
​
x = 1250

В стилях:

// При каких размерах экрана считаем его лаптопом
$width-laptop: 961px;
$max-width-laptop: 1100px;
​
// В какой момент максимальная ширина фиксируется на лаптопе
$width-centered-laptop: 1250px;
​
// При каких размерах экрана считаем его десктопом
$width-desktop: 1400px;
$max-width-desktop: 1400px;
​
// В какой момент максимальная ширина фиксируется на десктопе
$width-centered-desktop: 1591px;
​
// Поля на экранах с зафиксированной максимальной шириной
$centered-laptop-page-field: calc((100vw - $max-width-laptop) / 2);
$centered-desktop-page-field: calc((100vw - $max-width-desktop) / 2);
​
​
.holder {
  // Поля на десктопах и лаптопах
  padding-left: 6vw;
  padding-right: 6vw;
  ​
  // Поля в 20 пикселей на мобильных
  @media screen and (max-width: $width-mobile) {
    padding-left: 20px;
    padding-right: 20px;
  }
  ​
  // Выключаем статичные поля в 6%, включаем динамические поля,
  // ограничивающие ширину содержимого 1100 пикселями
  @media only screen and (min-width: $width-centered-laptop) and (max-width: calc($width-desktop - 1px)) {
    padding-left: $centered-laptop-page-field;
    padding-right: $centered-laptop-page-field;
  }
  ​
  // Выключаем статичные поля в 6%, включаем динамические поля,
  // ограничивающие ширину содержимого 1400 пикселями
  @media only screen and (min-width: $width-centered-desktop) {
    padding-left: $centered-desktop-page-field;
    padding-right: $centered-desktop-page-field;
  }
}

Если какой‑то элемент — например, шапка совета — должен проигнорировать ограничение и занять всю ширину экрана, используем вытяжки:

.fullWidthFloor {
  margin-left: -6vw;
  margin-right: -6vw;
  ​
  @media screen and (max-width: $width-mobile) {
    margin-left: -20px;
    margin-right: -20px;
  }
  ​
  @media only screen and (min-width: $width-centered-laptop) and (max-width: calc($width-desktop - 1px)) {
    margin-left: -$centered-laptop-page-field;
    margin-right: -$centered-laptop-page-field;
  }
  ​
  @media only screen and (min-width: $width-centered-desktop) {
    margin-left: -$centered-desktop-page-field;
    margin-right: -$centered-desktop-page-field;
  }
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Отправить
Поделиться
Запинить

Рекомендуем похожие советы