Отзывчивый веб-дизайн - [13]
Но существует несколько отличных решений на базе JavaScript: например, jQuery-плагин Backstretch Скотта Робина (http://bkaprt.com/rwd/21/), который позволяет добавлять масштабируемые фоновые изображения для элемента body. Как вы узнаете из следующей главы, медиазапросы CSS3 также можно использовать для адаптации различных фоновых изображений к различным диапазонам разрешений. Так что если нет возможности использовать >background-size, вполне возможно найти другое решение. Для пытливого ума нет преград – гласит народная мудрость.
Как научиться любить Overflow
Существует еще несколько способов адаптации изображений с фиксированной шириной к «резиновому» контексту. Посмотрите эксперименты Ричарда Раттера с широкими изображениями в гибких макетах (http://bkaprt.com/rwd/11/). Раз уж вы решили заняться отзывчивым дизайном, изучите эти способы, некоторые из них могут оказаться весьма полезными.
Лично я несколько раз использовал свойство overflow. Как мы узнали из предыдущей главы, широкие изображения могут попросту вылезать за пределы своих контейнеров. И в большинстве случаев для их ограничения лучше всего использовать правило >max-width: 100 %. Но можно и обрезать эти лишние данные, применив свойство >overflow: hidden. То есть вместо того, чтобы позволить изображению изменить свои размеры автоматически:
>.feature img {
>max-width: 100 %;
>}
мы можем попросту отрезать лишние данные:
>.feature {
>overflow: hidden;
>}
>.feature img {
>display: block;
>max-width: auto;
>}
В результате получаем изображение, обрезанное под свой контейнер (рис. 3.15). Оно никуда не делось, просто его лишние элементы не видны.
Однако это не лучшее решение. На самом деле я считаю, что в большинстве случаев >overflow проигрывает >max-width. Но этот метод имеет право на существование и в некоторых случаях даже может быть полезным.
>Рис. 3.15. Применив overflow: hidden к контейнеру нашего изображения, мы получили обрезанное изображение. Можно крикнуть «ура»
Проблемы с контентом
В большинстве случаев и свойство >overflow, и правило >max-width: 100 % довольно функциональны и работают для большинства медиа-файлов. Лично я успешно применял их в различных «резиновых» сетках.
Но при этом оба подхода абсолютно нечувствительны к содержанию. Каждый из них устанавливает некоторые основные правила, которым следуют изображения по отношению к своим контейнерам: >max-width: 100 % масштабирует картинку в соответствии с размерами контейнера, а >overflow позволяет убрать лишние данные, выходящие за его пределы.
Но что если вам предстоит работа со сложной графикой или изображением, которое несет определенную информационную нагрузку (рис. 3.16)? В этом случае простое масштабирование или обрезание нежелательны, поскольку могут помешать пользователю правильно понять информацию, содержащуюся в изображении.
>Рис. 3.16. Эта отличная инфографика с сайта BBC News содержит жизненно необходимую с точки зрения контента информацию. Простое масштабирование может оказаться неэффективным
В этом случае нужно найти способы передачи различных вариантов одной и той же картинки в разных диапазонах разрешений. Другими словами, вы можете создать один образец для десктопных браузеров, а второй, более линейный, – для устройств с маленькими экранами. Задав эти параметры, вы можете положиться на сервер, который сам выберет наиболее подходящее изображение.
Такое решение выходит за рамки данной книги (и не всегда по силам вашему покорному слуге), однако дизайнер-разработчик Брайан Ригер описал возможный подход в своем блоге (http://bkaprt.com/rwd/23/), откуда вы и сможете его скачать.
Если вы решили использовать серверное решение, его можно укрепить различными клиентскими приемами, которые мы уже обсуждали. Например, вы можете создать несколько вариантов изображения под разные диапазоны разрешений, а затем использовать правило >max-width: 100 %, чтобы сгладить переход на другие устройства, браузеры и диапазоны разрешений.
Гибкие сетки и изображения как древо познания
Итак, к этому моменту мы изучили все, что необходимо для успешного создания сложных, но гибких макетов: простая математика для гибких сеток и немного стратегических решений для изображений и других медиафайлов. Все эти знания вы можете применять не только по отношению к блогу, который мы писали, но и ко всему сайту Robot or Not, создавая дизайн, основанный на системе пропорций и процентов, без всяких пикселей (рис. 3.17).
Имея на руках гибкую основу, мы готовы добавить еще один ингредиент к нашему отзывчивому дизайну.
>Рис. 3.17. Использовав рекомендации, содержащиеся в двух главах, мы получили завершенный и гибкий макет, который может расширяться и сужаться в зависимости от размеров окна браузера
4. Медиазапросы
В общем-то, я всегда был противником фиксированной верстки. Я с самого начала чувствовал, что будущее – за макетами, которые обладают гибкостью хоть в малейшей степени, ведь они всегда могут подстроиться под размеры окна, экрана или разрешения устройства. Более того, настаивая на необходимости гибкости, я часто использовал эпитеты «перспективный» и «приспосабливающийся». Увы, ко мне не очень-то прислушивались и считали страшным занудой.
