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

Чтобы сделать страницы адаптивными, используют три техники: гибкую сетку, гибкие изображения и медиа‑запросы.

Гибкая сетка

Основная идея — не использовать в сетке фиксированные значения в пикселях. Вместо этого стоит опираться на относительные единицы измерения (например проценты) и подстраивать отступы, минимальные и максимальные размеры блоков так, чтобы осмысленно и аккуратно заполнять всё доступное пространство.

Адаптируем макет с колонкой текста шириной в 400 пикселей:

Было

<style>
article {
  box-sizing: border-box;
  width: 400px;
  /*
  * Задаём внутренние отступы:
  * 8 пикселей сверху и слева,
  * 16 пикселей справа,
  * 24 пикселя снизу.
  */
  padding: 8px 16px 24px 8px;
}
</style>
<article>
  <p>
    Я великий комбинатор, идейный борец
    за денежные знаки.
  </p>
  <p>
    Кроме того, я знаю четыреста сравнительно
    честных способа отъёма денег.
  </p>
  <p>
    В городе Арбатове выдал себя за сына
    лейтенанта Шмидта и получил от председателя
    горисполкома небольшую материальную помощь.
  </p>
</article>

Стало

<style>
article {
  box-sizing: border-box;
  /*
  * Меняем фиксированную ширину
  * на ограниченную:
  * если экран меньше 400 пикселей,
  * элемент займёт всю доступную ширину;
  * если больше 400 — ровно 400 пикселей.
  */
  max-width: 400px;
  /*
  * Задаём внутренние отступы
  * пропорционально ширине элемента.
  * Чем уже экран — тем меньше отступы.
  */
  padding: 2% 4% 6% 2%;
}
</style>
<article>
  <p>
    Я великий комбинатор, идейный борец
    за денежные знаки.
  </p>
  <p>
    Кроме того, я знаю четыреста сравнительно
    честных способа отъёма денег.
  </p>
  <p>
    В городе Арбатове выдал себя за сына
    лейтенанта Шмидта и получил от председателя
    горисполкома небольшую материальную помощь.
  </p>
</article>

Гибкие изображения

Чтобы картинки растягивались на всю ширину, их делают «резиновыми»:

img {
  /*
  * Делаем изображения блочными элементами.
  */
  display: block;
  /*
  * Задаём максимальную ширину в 100%.
  */
  max-width: 100%;
  height: auto;
}

Чтобы при растяжении картинки выглядели хорошо, используют СВГ (если возможно) или картинки с двойным‑тройным разрешением.

Последний способ не экономит трафик, поэтому ему на замену придумали атрибут srcset. С его помощью можно подсказать браузеру, какую версию картинки загружать: для узкого экрана — облегчённую версию для мобильных, для широкого десктопа — картинку в двойном размере. Но это — тема для отдельного совета.

Медиа‑запросы

С помощью медиа‑запросов перестраивают страницу под разную ширину экрана. Например, прячут ненужное, перестраивают колонки в одну под другой, меняют кегль и интерлиньяж на узких экранах.

Есть два подхода к таким перестроениям: «сначала десктопы» и «сначала мобильные». В первом случае сайт верстают для десктопов, а затем добавляют стилей, улучшающих его отображение на остальных экранах. Этот же подход используют в том случае, когда сайт уже свёрстан и нужна мобильная версия.

Адаптируем этажи портфолио из совета о каталогах и выдаче:

<style>
body {
  /* Задаём поля странице в 6% */
  padding: 3% 6%;
}
​
/*
* @media — медиа-запрос,
* screen and (...) — условие,
* при котором стили внутри медиа-запроса
* начнуть работать.
*
* В данном случае у body поменяются поля,
* когда ширина окна станет меньше 768 пикселей.
*/
@media screen and (max-width: 768px) {
  body {
    padding: 1% 2%;
  }
}
​
.row {
  /* .row — флекс-контейнер, этаж портфолио. */
  display: flex;
  margin-bottom: 20px;
}
​
@media screen and (max-width: 768px) {
  .row {
    /*
    * На узких экранах переносим не поместившиеся
    * проекты на следующую строку.
    */
    flex-wrap: wrap;
  }
}
​
.project {
  /*
  * .project — флекс-элемент, карточка проекта.
  * Будет занимать в два раза больше места,
  * чем описание проекта.
  */
  flex: 2;
  padding-right: 10px;
}
​
.project-caption {
  /* .project-caption — описание проекта. */
  flex: 1;
  padding-right: 10px;
}
​
.project:last-child,
.project-caption:last-child {
  /*
  * У последней подписи или проекта
  * убираем правый отступ.
  */
  padding-right: 0;
}
​
/*
* На узких экранах растягиваем проекты
* и подписи на всю ширину
* окна и перенастраиваем отступы.
*/
@media screen and (max-width: 768px) {
  .project,
  .project-caption {
    min-width: 100%;
    padding: 0;
    margin-bottom: 10px;
  }
  ​
  .project:last-child,
  .project-caption:last-child {
    margin-bottom: 0;
  }
  ​
  /*
  * Перемещаем подпись наверх.
  */
  .project-caption:last-child {
    order: -1;
    margin-bottom: 10px;
  }
}
</style>
​
<div class="row">
  <div class="project">
    <div class="project-image">
      <img
        src="https://unsplash.it/1000/500"
        width="1000"
        height="500">
    </div>
  </div>
</div>
​
<div class="row">
  <div class="project">
    <div class="project-image">
      <img
        src="https://unsplash.it/800/800"
        width="800"
        height="800">
    </div>
  </div>
  ​
  <div class="project">
    <div class="project-image">
      <img
        src="https://unsplash.it/850/850"
         width="850"
         height="850">
    </div>
  </div>
  ​
  <div class="project-caption">
    <p>
      Прак­ти­че­ское руко­вод­ство для мене­дже­ров
      и стар­та­пе­ров
    </p>
  </div>
</div>

В подходе «сначала мобильные» начинают с мобильной версии и улучшают её с увеличением доступной ширины экрана.

Адаптируем пост в блоге:

Порастягивайте окно и посмотрите, как меняется текст и его ширина
<style>
body {
  /*
  * Задаём поля странице.
  */
  padding: 1% 2% 3% 1%;
}
​
/*
* У body увеличатся отступы, когда ширина
* окна станет больше 768 пикселей.
*/
@media screen and (min-width: 768px) {
  body {
    padding: 3% 6% 9% 3%;
  }
}
​
body {
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 22px;
}
​
h3 {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  margin: 0 0 .05em 0;
}
​
p {
  margin: 0 0 .88em 0;
}
​
/*
* На экранах с шириной
* более 960 пикселей,
* ограничиваем максимальную ширину
* текста, ставим его по центру
* и увеличиваем кегль.
*/
@media screen and (min-width: 960px) {
  article {
    max-width: 840px;
    margin: 0 auto;
  }
  ​
  h3,
  p {
    font-size: 20px;
    line-height: 27px;
  }
}
</style>
<article>
  <h3>Конец «Вороньей слободки»</h3>
  <p>...</p>
  <p>...</p>
</article>

Что дальше

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы