Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 46 из 62

. Для него также можно установить максимальную ширину и поля.
В нижнем колонтитуле можно найти для управления тег
2. Добавьте в файл styles.css еще один стиль:
nav ul, header h1, footer p {
max-width: 1200px;
margin: 0 auto;
}
Этот групповой селектор нацелен на текст панели навигации, баннера и нижнего колонтитула, но не на те элементы, в которых он содержится. Теперь, если сохра-

Глава 13. Разметка страницы на основе плавающих элементов
463
нить файл CSS и просмотреть в браузере файл start.html
, вы увидите, что элемен- ты навигации, заголовок и нижний колонтитул не становятся шире 1200 пикселов.
Но основное содержимое по-прежнему заполняет все пространство окна браузера.
Чтобы исправить ситуацию, нужно заключить три столбца в еще один div
-контей- нер для создания группы, размером и центровкой которой можно управлять.
ПРИМЕЧАНИЕ
Другой вариант заключается в том, чтобы вставить еще один тег

в тег

, в него заключить теги

и , а другой тег

вставить в тег

. Можно позволить

и

сохранять полную ширину, ограничивая при этом ширину этих вложенных div-контейнеров.
3. Откройте в текстовом редакторе файл start.html
. Непосредственно перед ком- ментарием с представлением первой боковой панели here -->
(то есть сюда помещается первая боковая панель) добавьте

>
:

Теперь этот div
-контейнер нужно закрыть.
4. Перейдите в конец HTML-файла. Между закрывающим тегом

и откры- вающим тегом

добавьте закрывающий тег

, чтобы код HTML приобрел следующий вид:

И наконец, можно добавить это новое имя класса к стилю, созданному в шаге 2.
5. Добавьте новый класс к групповому селектору:
nav ul, header h1, footer p, .contentWrapper {
max-width: 1200px;
margin: 0 auto;
}
Полная версия этого урока находится в папке
13_finished

14
Адаптивный
веб-дизайн
Веб-дизайнерам всегда приходилось решать задачу разработки под различные раз- меры экрана, от экранов ноутбуков шириной 760 пикселов до огромных широкоэк- ранных дисплеев. С ростом числа смартфонов и планшетных компьютеров разра- ботка под широкий диапазон экранов с различной шириной и высотой стала еще актуальнее. Некоторые компании зашли так далеко, что стали создавать отдельные веб-сайты, предназначенные только для мобильных устройств (верхние изображе- ния на рис. 14.1). Но при дефиците времени, средств и технических знаний для раз- работки двух сайтов и программы для веб-сервера, предоставляющей нужный сайт тому или иному устройству, веб-сайты исключительно для мобильных устройств вам вряд ли по плечу.
К счастью, есть еще один, более простой подход, позволяющий создать один сайт, адаптируемый к устройствам с различной шириной экрана (нижние изобра- жения на рис. 14.1). Эта технология, получившая название «адаптивный веб-ди- зайн», использует различные приемы, заставляющие страницу изменять разметку на основе ширины экрана браузера. Например, на смартфоне страницу можно вы- ложить одной, легкой для чтения колонкой, помещающейся на узком экране (ниж- нее левое изображение на рис. 14.1), а на более широких мониторах поддерживать разметку в несколько колонок (нижнее правое изображение на рис. 14.1).
Основы адаптивного веб-дизайна
Читать веб-страницу, состоящую из четырех колонок, на экране телефона, имеющем ширину 320 пикселов, очень трудно. Не менее трудно читать одну колонку текста, растянутую на 2560 пикселов большого монитора настольного компьютера. Адап- тивный веб-дизайн (Responsive web design, RWD, этот термин введен Итаном Мар- коттом) является попыткой решить эту проблему. Он позволяет изменять всю раз- метку страницы на основе ширины окна браузера (наряду с другими факторами), допуская создание наиболее легко читаемых представлений для каждого устройства при отсутствии необходимости в создании нескольких версий одного и того же веб- сайта. RWD не является единой технологией или методом. В нем собраны воедино несколько методов CSS и HTML для создания веб-страниц, чья разметка адапти- руется к различным экранам.

Глава 14. Адаптивный веб-дизайн
465
Рис. 14.1. Многие крупные компании, например Amazon и Target, создают мобильные версии своих сайтов, оптимизированные под дисплеи портативных устройств типа iPhone
ПРИМЕЧАНИЕ
Подходы к RWD Итан Маркотт излагает в своей книге Responsive Web Design издательства
A Book Apart. Можно также прочитать статью, посвященную RWD, этого же автора по адресу http://www.alistapart.com/articles/responsive-web-design.
В RWD объединены три основные идеи: гибкие сетки (grid) для разметки, гиб- кая среда для изображений, а также видео- и медиазапросы CSS, предназначенные для создания различных стилей для экранов различной ширины. Гибкие сетки позволяют избавиться от разметок с фиксированной шириной. Поскольку у экра- нов смартфонов довольно широкий диапазон ширины экрана, создавать страницы с фиксированной шириной нет никакого смысла. Нужна страница, способная рас- ширяться и сужаться, чтобы поместиться на экране конкретного устройства (это

466
Часть 3. Макет страницы концепция свободного дизайна, рассмотренная в подразделе «Смешанный свобод- ный и фиксированный дизайн» обучающего урока главы 13. Создание гибкой сре- ды дает возможность подбирать масштаб для изображений и видеоматериалов, чтобы они поместились на соответствующем экране — большие фотографии на больших мониторах, фотографии поменьше на небольших экранах и т. д.
И наконец, медиазапросы являются CSS-технологией, позволяющей на основе создавшихся условий отправлять браузеру различные стили. Например, для экра- на, имеющего ширину меньше 480 пикселов, можно отправлять один набор стилей, а для экрана шириной 760 пикселов — другой набор стилей. Но одной шириной дело не ограничивается: можно разрабатывать стили, применяемые только к план- шетным устройствам при альбомном просмотре или к устройствам с высокой плотностью пикселов (например, с дисплеем Retina на iPhone и iPad).
Настройка веб-страницы для RWD
Если у вас есть смартфон, например iPhone или телефон с оперативной системой
Android, откройте веб-браузер и зайдите на страницу www.nytimes.com
. Должно появиться изображение, подобное показанному на рис. 14.2 (если только New York
Times с момента написания книги не сделал свой сайт адаптивным).
Рис. 14.2. Веб-сайты, разработанные для браузеров настольных компьютеров, такие как сайт
New York Times, на телефонах выглядят слишком мелкими
Это крупноформатный многоколоночный дизайн, втиснутый в небольшое про- странство экрана телефона. Поскольку производители телефонов понимают, что большинство веб-сайтов созданы для экранов настольных компьютеров, они заста- вили свои браузеры вести себя немного непривычно для вас. Мобильные браузеры не отображают страницу на все 100 %; если бы они это сделали, то страница шири- ной 960 пикселов не поместилась бы на экране и вы бы увидели только часть этой

Глава 14. Адаптивный веб-дизайн
467
страницы. Затем, чтобы увидеть всю страницу, вам пришлось бы перемещать поле просмотра в разных направлениях. Вместо этого, чтобы страница поместилась на экране, телефонные браузеры уменьшают масштаб. Конкретный коэффициент уменьшения варьируется в зависимости от характеристики конкретного телефона.
Например, Safari на iPhone работает так, будто экран действительно имеет ширину
980 пикселов, и уменьшает страницу, чтобы она поместилась в этих 980 пикселах.
Впрочем, подобное поведение мобильных браузеров позволяет неплохо справ- ляться с большинством сайтов, но с адаптивным веб-дизайном оно сочетается не очень хорошо. Поскольку адаптивные сайты предназначены для получения хоро- шего представления на смартфонах, уменьшать масштаб изображения на дисплее не нужно, так как текст станет слишком мелким для чтения. К счастью, есть до- вольно простой способ отмены такого поведения в браузерах мобильных устройств.
Нужно просто к разделу