Гибкий макет на основе сетки

Я не собираюсь подробно расписывать все правила верстки адаптивного дизайна. На практике при его реализации трудности возникают также и из-за требований, связанных с «причудливым» контентом; требований, связанных со сложным макетом страницы, а также из-за необходимости добавлять функции, поддерживаемые новейшими версиями браузеров, при этом обеспечивая функциональность макета и в старых версиях браузеров. В этом руководстве мы не будем вдаваться в эти детали. Я собираюсь рассказать о трех основных составляющих адаптивного дизайна. А именно о гибких сетках, изображениях и медиа-запросах.

Достижение гибкости

Чтобы проиллюстрировать основные принципы, мы начнем с рассмотрения обычного сайта с фиксированной шириной 960 пикселей.

Большинство сайтов состоят из следующих частей:

Шапка;
Логотип;
Меню навигации;
Тело;
Контент;
Контент боковой панели;
Подвал;
Копирайт;
Социальные ссылки.

Шаг 0 — исправление сетки

Эта структура не содержит ничего необычного. Я хочу сразу предупредить вас, что это не будет лучший дизайн в мире, но в данном случае нас больше интересует принцип реализации и основные правила верстки:

Этот сайт состоит из ранее упомянутых мной элементов. Вы уже должны были заметить, что он выглядит не совсем правильно, когда вы просматриваете его на данной странице. Он отображается внутри элемента <iframe>, и ширина сайта превышает ширину окна просмотра, в котором он размещается. Поэтому, чтобы просмотреть его полностью, необходима горизонтальная прокрутка.

Для каждого элемента задаются фиксированные размеры в пикселях:

.container {
     width: 960px;
}
.header {
  width: 960px; 
 height: 100px;
}
.logo {
  width: 100px;
  padding: 10px;
}
.navigation {
  width: 840px;
}
.main-nav {
   width: 800px;
}
.main-nav li {
  width: 198px;
  border-left:1px;
  border-right:1px;
}
.content {
 width: 600px;
 padding: 30px;
}

.sidebar {
 width: 280px;
 padding: 10px;
}

.footer {
  width: 900px;
  padding: 30px;
}

Установка правильного размера окна просмотра

80% проблем, с решением которых люди просят меня помочь, возникают еще в самом начале построения адаптивного дизайна и связаны с одной единственной строкой кода между тегами <HEAD> </ HEAD>. Это одно из основных правил верстки сайта:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Когда в нашу жизнь вошли смартфоны, и появилось большое количество сайтов для небольших экранов, Apple пришла в голову идея создать окно просмотра с шириной 960 пикселей, чтобы это соответствовало основам построения большинства сайтов. Это позволило обеспечить пропорциональное сжатие ресурсов. С помощью двойного нажатия мы могли увеличить его, чтобы найти и нажать крошечную ссылку.

Добавление этой одной строки означает, что ширина окна просмотра устанавливается в зависимости от размера экрана самого устройства. Это работает на любом существующем устройстве и будет работать на всех новых, которые будут выпущены в будущем. При этом масштаб задается 1к 1, то есть сайт не будет сжат и растянут.

Получение гибкости

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

Одно из правил адаптивной верстки заключается в использовании процентов или em вместо привычных пикселей.

Далее в дело вступает математика. Чтобы получить необходимый результат, нужно разделить размер целевого элемента на размер (родительского элемента) и задать соотношение в процентах. Взгляните на приведенный ниже CSS-код. В нем каждое значение в пикселях выражено в процентах от его родительского элемента:

.container {
/*     width: 960px;*/
/* container не имеет родительского элемента, поэтому я задаю для него размер 100%. Если мне нужно, чтобы он не растягивался слишком сильно, я могу ограничить максимальную ширину, применив значение max-width. Чтобы увидеть на практике, как это работает, нужно растянуть окно шире этого значения.
*/
width: 1200px;
max-width: 100%;
}
.header {
/*     width: 960px;*/
/* header имеет родительский элемент - container. Поэтому здесь нужны математические вычисления. 960 / 960 = 1
1 * 100 = 100%
*/
 width: 100%;
}

.logo {
/*  width: 100px;
  padding: 10px;
logo имеет ширину 100px и размещается внутри header. Поэтому вычисления будут такие:
 100 / 960 = 0.1041666666666667
0.1041666666666667 * 100 = 10.41666666666667%
padding также зависит от контекста, но так как отступ в десять раз меньше, чем logo, я разделю его ширину на 10 и не буду отдельно вычислять ширину отступа.
padding: 1.041666666666667%;
*/
  width: 10.41666666666667%;
  padding: 1.041666666666667%;
}
.navigation {

/*  width: 840px;
navigation имеет ширину 840px и размещается внутри header. Поэтому вычисления будут такие: 
840 / 960 = 0.875
0.875 * 100 = 87.5%

*/
width: 87.5%;

}
.main-nav {
/*   Я думаю, вы уже поняли, что мы делим значение ширины элемента на значение ширины его контекста (родительского элемента) и умножаем на 100, чтобы получить значение в процентах. Поэтому я больше не буду расписывать это правило верстки, а просто приведу вычисления.
width: 800px;   800 / 840 = 95.23809523809524% 
padding: 0 20px 20 / 840 = 2.380952380952381% */
width: 95.23809523809524%;
padding: 0 2.380952380952381;
}

.main-nav li {

/* 
  width: 198px;
  border-left:1px;
  border-right:1px;
 198 / 800 = 24.75%
Так как мы не можем сделать рамку меньше чем 1 пиксель, я оставлю эти значения без изменений.
*/

  width: 24.75%;
  border-left:1px;
  border-right:1px;
}
.content {
/*width: 600px;
 padding: 30px;
 600/960 = 62.5%
 30/960 = 3.125%
*/

width: 62.5%;
 padding: 3.125%;
}

.sidebar {
/* width: 280px;
 padding: 10px;

 280/960 = 29.16666666666667%
 10/960 = 1.041666666666667%
*/
 width: 29.16666666666667%;
 padding: 1.041666666666667%;
}

.footer {
/*  width: 900px;
  padding: 30px;
900/960 = 93.75%
30/960 = 3.125%
*/
  width: 93.75%;
  padding: 3.125%;
}

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

Посмотреть на полном экране

Вот таким образом мы все сделали гибким.

Перевод статьи «A FLEXIBLE, GRID BASED LAYOUT» был подготовлен дружной командой проекта Сайтостроение от А до Я.