x
 
Светлана Кузьминова
21 февраля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Заметила, что на широких экранах сайт бюро в какой-то момент перестаёт тянуться. Как это устроено?


Сайт бюро адап­ти­ру­ется для трёх клю­че­вых типов устройств. Мы счи­таем «мобиль­ными» экраны с шири­ной менее 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт до 12 августа или пока есть свободные места.
 

Поделиться
Отправить

Комментарии

Андрей Пулин
21 февраля 2019

Зачем использовать отрицательные марджины? Не пойму. Почему просто не задавать поля нужным элементам, а ненужным не задавать, оставлять ноль?


21 февраля 2019

Андрей, нам так проще: в 99% случаев хватает одного общего контейнера с заданными полями.

Николай Кузнецов
20 марта 2019

Василий, чем вызвано использование динамических полей, а не max-width? В чём преимущества?


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как переходить на переписанные с нуля сервисы? Как организовать работу удалённой команды разработчиков? С чего начать вёрстку ХТМЛ‑страницы 2 Как донести подход HADI до руководства? 4




Недавно всплыло

Хочу научиться сторителлингу 2 Хочу научиться сторителлингу 9 2 2