Адаптивная верстка, часть 1: резиновая сетка

Это первая из серии статей о адаптивной верстке, за основу взят продвинутый интенсив по созданию интерфейсов htmlacademy.ru

Способность макета в целом и его элементов в частности растягиваться/сжиматься до определенных размеров по ширине в зависимости от размера вьюпорта — одна из ключевых составляющих адаптивной верстки.

Основное отличие резины от фикса размеры: px, pt — для фиксированной верстки, % — для резиновой.

Главный недостаток фиксированной верстки: при просмотре на не больших экранах появляется полоса прокрутки.

Контент начинает заезжать за экран.

При задании размеров в процентах ширина блоков и отступы изменяются пропорционально.

Контент растягивается и сжимается исходя из ширины экрана браузера.

Когда у нас был фиксированный макет все размеры мы просто снимали с макета в Фотошопе (другом графическом редакторе).

Центровщик

Чтобы перевести размеры в проценты нужно взять ширину центровщика (.layout-center-wrapper или .wrapper или .container) за 100% и исходя из этого значения рассчитывать все размеры внутри него.

Итак, сделаем наш центровщик резиновым:

Как видно, по высоте размеры остаются в px.

На самом деле растягивать контент на всю ширину экрана не лучшая идея (представьте, как это все расползется на большом экране).
Считается, что оптимальная ширина текста для чтение — в пределах 70 символов.

Поэтому обычно задают ширину центровщика:
width: 90%;
max-width: 940px; (к примеру).

Внутренние блоки

Сделаем резиновыми блоки внутри контейнера.

На всякий случай уточню, что .features li:last-child {margin-right:0;}

Паддинги внутренних блоков.

Как рассчитывать паддинг для внутренних блоков? Казалось бы, если он внутри блока, то и рассчитывать его нужно взяв ширину блока за 100%. Но нет, за 100% нужно брать ширину нашего центровщика (т.е. рассчитывать как и для марджинов):

Минимальная ширина

Предсказуемо, что если контент для ширины 940px сжать по ширине до размеров экрана телефона, то выглядеть это будет примерно так:

.

Первое решение не особо популярно, так верстали раньше. Оно заключается в задании для контейнера минимальной ширины (а лучше ее задавать для body):

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

Гораздо лучше будет, если расположить контент как на примере справа:

Мы перестраиваем сетки, чтобы контент шел в одну колонку.

При этом нужно будет поменять стили для элементов следующим образом:

А вот как сделать так, чтобы стили из правого столбика включались при определенной ширине экрана, мы рассмотрим в следующей статье.