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

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

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

На экранах меньшего размера страница будет выглядеть так же, как и раньше, но как только окно просмотра окажется больше или равно 50 rem, страница будет настраиваться под новую разметку.

Добавленные стили разметки имеют следующий вид:

@media screen and (min-width: 50rem) {

    .IntroWrapper {

        display: table;

        table-layout: fixed;

        width: 100%;

    }

    .MoneyShot,

    .IntroText {

        display: table-cell;

        width: 50%;

        vertical-align: middle;

        text-align: center;

    }

    .IntroText {

        padding: .5rem;

        font-size: 2.5rem;

        text-align: left;

    }

    .Ingredients {

        font-size: .9rem;

        float: right;

        padding: 1rem;

        margin: 0 0 .5rem 1rem;

        border-radius: 3px;

        background-color: #ffffdf;

        border: 2px solid #e8cfa9;

    }

    .Ingredients h3 {

        margin: 0;

    }

}

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

Теперь, после всех добавлений, наша основная адаптивная страница на iPhone выглядит следующим образом.

А так она выглядит при ширине окна просмотра свыше 50 rem.

Все эти дополнительные визуальные украшения не добавляют понимания того, что происходит в смысле адаптируемости, поэтому здесь я их опустил, но если нужно просмотреть соответствующий код, его можно загрузить по адресу http://rwd.education или https://github.com/benfrain/rwd.

При всей своей простоте этот пример включает в себя неотъемлемые части методологии построения адаптивного веб-дизайна.

Чтобы подтвердить важность всего рассмотренного, начните с базовых стилей, работающих на любом устройстве. Затем по мере роста размеров окна просмотра и/или возможностей постепенно наращивайте уровень пользовательского восприятия.

примечание

Полную спецификацию медиазапросов CSS Media Queries (Level 3) можно найти по адресу http://www.w3.org/TR/css3-mediaqueries/.

А рабочий вариант CSS Media Queries (Level 4) можно найти здесь: http://dev.w3.org/csswg/mediaqueries-4/.

Несовершенство нашего примера

В этой главе были рассмотрены все важные составные части простой адаптивной веб-страницы, использующей свойства HTML5 и CSS3.

Но и вам и мне понятно, что задачи по созданию сайтов вряд ли сведутся к такому простому примеру адаптивного дизайна. И этим примером возможности создания такого дизайна совсем не ограничиваются.

К примеру, что делать, если захочется, чтобы страница реагировала на различные условия освещенности? А как насчет изменения размеров ссылок, когда люди используют различные указывающие устройства (к примеру, палец, а не указатель мыши)? А насчет возможностей простого перемещения визуальных элементов и добавления к ним эффектов анимации с использованием исключительно CSS?

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

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

А как насчет логотипов и значков? В данном примере использовались изображения формата PNG, но мы ведь запросто можем применить масштабируемую векторную графику (Scalable Vector Graphics (SVG)), чтобы получить качественное изображение, которое не зависит от разрешения экрана просмотра.

Надеюсь, у вас есть время на учебу, поскольку ответы на все эти вопросы будут даны в следующих главах.

Резюме

Мы неплохо поработали, и теперь вам известны и понятны самые важные моменты, необходимые для создания полностью адаптивной веб-страницы. Но как мы только что выяснили, совершенству нет предела.

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

Для начала мы усвоим все, что могут предложить нам медиазапросы уровней CSS3 и CSS4 (Level 3 и Level 4 CSS Media Queries). Мы уже видели, как веб-страница может подстраиваться под ширину окна просмотра, но уже сейчас способны на более серьезные дела, и вскоре ваши браузеры станут демонстрировать гораздо более интересные возможности. Давайте двигаться дальше и смотреть на все это своими глазами.

2. Медиазапросы — поддержка различных окон просмотра

В предыдущей главе был дан краткий обзор основных компонентов адаптивной веб-страницы: подстраиваемой разметки, подстраиваемых изображений и медиазапросов.

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

В этой главе нам предстоит:

• узнать, зачем медиазапросы нужны в адаптивном веб-дизайне;

• разобраться с синтаксисом медиазапросов;

• научиться использовать медиазапросы в тегах link с CSS-инструкциями @import и внутри самих файлов CSS;

• разобраться с тем, какие именно свойства устройств поддаются тестированию;

• воспользоваться медиазапросами для обеспечения визуальных изменений в зависимости от доступного пространства экрана;

• решить вопрос о том, нужно ли группировать медиазапросы или записывать их по мере необходимости там, где это потребуется;

• разобраться в том, что представляет собой метатег viewport, позволяющий медиазапросам работать надлежащим образом на устройствах под управлением iOS и Android;

• рассмотреть возможности, которые будут предложены в будущих спецификациях медиазапросов.

Спецификация CSS3 состоит из нескольких модулей. Одним из таких модулей является Media Queries (Level 3). Медиазапросы позволяют нам определить целевое назначение конкретных CSS-стилей в зависимости от возможностей устройства. Например, с помощью всего лишь нескольких строк кода CSS мы можем изменить способ отображения содержимого в зависимости от таких параметров, как ширина окна просмотра, соотношение сторон экрана, ориентация экрана (альбомная или портретная) и т. д.

Медиазапросы получили довольно широкую реализацию. Их поддерживают практически все браузеры, кроме самых ранних версий Internet Explorer (8 и ниже). Короче говоря, не существует абсолютно никаких причин для того, чтобы не пользоваться ими!

совет

Спецификации в W3C проходят через процесс ратификации. Если выдастся свободный денек, не поленитесь ознакомиться с официальным объяснением этого процесса по адресу http://www.w3.org/2005/10/Process-200 51014/tr. Простейшая версия состоит в том, что спецификация начинается с рабочего проекта (Working Draft (WD)), проходит стадии кандидата в рекомендации (Candidate Recommendation (CR)), предложения в рекомендации (Proposed Recommendation (PR)) и, наконец, спустя много лет добирается до рекомендации (W3C Recommendation (REC)). Как правило, безопаснее использовать модули, находящиеся на более высоком уровне становления. Например, CSS Transforms Module Level 3 (http://www.w3.org/TR/css3-3d-transforms/) пребывал в статусе WD с марта 2009 года, а его поддержка со стороны браузеров была гораздо скуднее, чем поддержка модулей, пребывающих в статусе CR, например, медиазапросов.

Зачем в адаптивном веб-дизайне нужны медиазапросы

Медиазапросы CSS3 позволяют нацеливать конкретные CSS-стили на определенные возможности устройств или возникающие ситуации. Если углубиться в W3C-спецификацию, относящуюся к модулю медиазапросов CSS3 (http://www.w3.org/TR/css3-mediaqueries/), можно увидеть их следующее официальное представление:

«Медиазапрос состоит из типа среды и выражений в количестве от нуля и более, которые ведут проверку условий конкретных медиасвойств. К медиасвойствам, используемым в медиа­запросах, относятся ширина —'width', высота — 'height' и цвет — 'color'. За счет использования медиазапросов представления без изменения своего содержимого могут быть привязаны к конкретному диапазону устройств вывода информации».