Сайт бюро адаптируется для трёх ключевых типов устройств. Мы считаем «мобильными» экраны с шириной менее 960 пикселей, «лаптопами» — экраны с шириной от 961 до 1400 пикселей, «десктопами» — экраны с шириной от 1401 пикселя. Десктопы идут отдельно, потому что так проще поддерживать версии для больших экранов:
В каждой версии у сайта есть поля: 20 пикселей на мобильных, 6% на лаптопах и десктопах. Тексту достаётся либо вся ширина экрана, либо 11 из 16 колонок на лаптопах и десктопах. Соответственно, если открыть совет на экране с шириной в 2560 пикселей, ширина текстовой полосы будет равна 1543 пикселям:
153,6 пк
1543,175 пк
691,625 пк
153,6 пк
153,6
1543,175
691,625
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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.