Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

3. Динамически изменяемые разметки и адаптивные изображения

В давние времена (в конце 1990-х годов) ширину создаваемых сайтов обычно задавали в процентах. Указание ширины в процентах приводило к подстраиванию страниц к экрану просмотра и приобрело известность как резиновые разметки (fluid layouts).

Вскоре, во второй половине 2000-х годов, появилась промежуточная фиксация с использованием конструкций с фиксированной шириной (я виню в этом дотошных полиграфистов с их приверженностью к абсолютной точности в пикселах). Теперь же, поскольку мы создаем конструкции с адаптивным веб-дизайном, нам нужно обратиться в прошлое, к динамически изменяемым разметкам, и вспомнить обо всех получаемых благодаря им преимуществах.

В главе 2 мы в конечном итоге признали, что наряду с предоставляемой медиа­запросами возможностью создания дизайна, адаптируемого к изменяющимся размерам окна просмотра за счет переключения от одного набора стилей к другому, нам нужна какая-либо возможность динамического изменения нашего дизайна в промежутках между контрольными точками, предоставляемыми медиазапросами. Эта возможность успешно реализуется путем программирования подстраиваемой разметки, способной легко растягиваться для заполнения разрывов между контрольными точками медиазапросов.

В 2015 году в нашем распоряжении имеются такие эффективные средства для создания сайтов с адаптивным веб-дизайном, которых прежде не было. Это новый модуль CSS-разметки под названием Flexible Box (больше известный как Flexbox), который в настоящее время приобрел довольно широкую поддержку со стороны браузеров, став полноценным средством повседневного использования.

Он способен на большее, нежели просто предоставлять механизм динамически изменяемой разметки. Хотите получить возможность легко и просто выровнять содержимое по центру, изменить порядок в источнике разметки и вообще относительно легко создавать великолепные разметки? Тогда механизм разметки Flexbox для вас. Основная часть этой главы посвящена Flexbox, она охватывает самые интересные из предлагаемых им возможностей.

Есть еще одна ключевая область адаптивного веб-дизайна, которую теперь можно рассмотреть намного предметнее, чем когда-либо раньше, — я имею в виду адаптивные изображения. Теперь уже есть точно определенные методы и синтаксис для отправки на устройства наиболее подходящей для их окон просмотра версии изображения. Последний раздел главы будет посвящен разъяснению порядка работы адаптивных изображений и изучению способов, благодаря которым мы можем заставить их работать на нас.

В этой главе будут рассмотрены следующие вопросы:

• преобразование фиксированных размеров в пикселах в пропорциональные размеры;

• существующие механизмы CSS-разметки и их недостатки;

• разбор модуля Flexible Box Layout Module и предоставляемых им преимуществ;

• изучение допустимого синтаксиса для переключения разрешения и режиссуры адаптивных изображений.

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

Все графические составляющие, созданные в таких программах, как Photoshop, Illustrator, Fireworks (RIP) или Sketch, имеют фиксированные размеры в пикселах. Когда разработчик перерабатывает дизайн в подстраиваемую разметку для отображения в браузере, элементы дизайна нуждаются в преобразовании в пропорцио­нальные величины.

Для этого преобразования есть красивая и простая формула, которую отец адаптивного веб-дизайна, Итан Маркотт (Ethan Marcotte), разместил в своей статье 2009 года Fluid Grids (http://alistapart.com/article/FLUIDGRIDS):

Цель / Среда = Результат.

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

Рассмотрим очень простую разметку страницы, предназначенную для просмотра на настольном компьютере. В идеале мы всегда будем подходить к разметке для настольного компьютера, начиная с разметки для более скромных экранов, но с целью приведения примеров пропорций рассмотрим две данные ситуации в обратном порядке.

Эта разметка имеет следующий вид.

Ее ширина — 960 пикселов. Заголовок и подвал (нижний колонтитул) выводятся на всю ширину разметки. Область слева имеет ширину 200 пикселов, а область справа — 100 пикселов. Даже при моей недостаточной математической подкованности я могу вас заверить, что средняя часть будет иметь ширину 660 пикселов. Нам нужно преобразовать среднюю и боковые части, приведя их к пропорциональным размерам.

Начнем с левой стороны. Она имеет ширину 200 единиц (в нашей формуле это цель). Разделим этот размер на 960 единиц (среду) и получим 0,2083 33333. Теперь, вычислив результат по формуле, нужно переместить десятичный разделитель на две позиции вправо. В результате получим 20,83 33333 %. Именно так 200 пикселов описываются в процентах к 960 пикселам.

А как насчет средней части? Здесь 660 единиц (цель), разделенные на 960 (среда), дают нам 0,6875. Переместим десятичный разделитель на две позиции вправо и получим 68,75 %. И наконец, правая сторона: 100 единиц (цель), разделенные на 960 (среда), дают 0,1041 66667. После перемещения десятичного разделителя получим 10,41 66667 %. Как видите, ничего сложного. Повторяйте за мной: цель, разделенная на среду, дает результат.

В качестве доказательства быстро создадим эту простую разметку в виде блоков в браузере. Код разметки можно увидеть в файле каталога example_03-01. Вот как выглядит код HTML:

А вот как выглядит код CSS:

html,

body {

margin: 0;

padding: 0;

}

.Wrap {

max-width: 1400px;

margin: 0 auto;

}

.Header {

width: 100%;

height: 130px;

background-color: #038C5A;

}

.WrapMiddle {

width: 100%;

font-size: 0;

}

.Left {

height: 625px;

width: 20.83 33333%;

background-color: #03A66A;

display: inline-block;

}

.Middle {

height: 625px;

width: 68.75%;

background-color: #bbbf90;

display: inline-block;

}

.Right {

height: 625px;

width: 10.41 66667%;

background-color: #03A66A;

display: inline-block;

}

.Footer {

height: 200px;

width: 100%;

background-color: #0 25059;

}

Если пример кода открыть в браузере и изменить размер страницы, вы увидите, что размер средней части останется пропорциональным по отношению к другим частям. Можно также попробовать изменять значение свойства max-width для класса .Wrap, чтобы сделать окружающие размеры для разметки больше или меньше (в примере установлено значение 1400 пикселов).