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

веб-страницы следующий код HTML:

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

476
Часть 3. Макет страницы
/* Сюда помещаются стили, перезапускающие исходные настройки браузера */
/* Сюда помещаются стили для браузеров мобильных устройств и основные стили для всех устройств */
body {
/* свойства для тела документа */
}
/* только для дисплеев средней ширины */
@media (min-width: 481px) and (max-width:768px) {
body {
/* свойства, применяемые только к браузерам планшетных устройств */
}
}
/* только для дисплеев большой ширины */
@media (min-width:769px) {
body {
/* свойства, применяемые только к браузерам настольных устройств */
}
}
Если следовать этому решению, нужно помнить, что Internet Explorer 8 и более ранние версии не понимают медиазапросов и требуют использования программы
JavaScript для применения стилей, предназначенных для больших дисплеев. В про- тивном случае для сайта будут применяться только стили, предназначенные для браузеров мобильных устройств (см. второе примечание в подразделе «Создание медиазапросов» данного раздела).
Гибкие сетки
Не стоит поддаваться соблазну разработки раскладок с фиксированной шириной
320 пикселов, типичной для iPhone и некоторых телефонов с операционной си- стемой Android, с шириной 720 пикселов для компьютеров типа iPad в книжном
(высоком) режиме работы и с шириной 1000 пикселов для мониторов настольных систем. Хотя устройства типа iPhone приобрели широкую популярность, на них свет клином не сошелся. Есть еще и телефоны с операционной системой Android, имеющие всевозможные формы и размеры, а стало быть, и ширину. Не сомневаюсь, что вам попадались и многие другие устройства с необычными размерами, да и планшетные устройства имеют весьма разнообразную ширину экрана. То есть универсальной ширины для смартфонов и планшетных устройств просто нет, по- этому лучше всего создавать страницы с гибкой шириной.
Основным компонентом адаптивного веб-дизайна являются гибкие сетки. Они — не что иное, как свободная разметка с непостоянной шириной, рассматривавшаяся в гл. 12, и при которой общая ширина страницы изменяется, чтобы страница могла поместиться на экранах разной ширины. В большинстве случаев это означает, что для ширины устанавливается значение 100 %. Но для дисплеев настольных систем, возмож- но, потребуется использовать свойство max-width
, чтобы страница не становилась аб- сурдно широкой на больших мониторах настольных систем. Кроме того, процентная

Глава 14. Адаптивный веб-дизайн
477
основа должна быть в дизайне и у отдельных колонок, заменяя собой единицы изме- рения в фиксированных пикселах или em. Отдельные колонки также должны стано- виться шире или уже, чтобы вписываться в изменяющуюся ширину страницы.
СОВЕТ
Как уже упоминалось во врезке «Информация для опытных пользователей. Определение порядка в grid- системе» в подразделе «Плавающие элементы внутри плавающих элементов» раздела «Использование плавающих элементов в разметках» гл. 13, в свободном доступе есть множество заранее собранных в пакеты grid-систем, представляющих собой HTML- и CSS-код, облегчающий создание многоколоноч- ных разметок. А с созданием свободной разметки вы уже познакомились в предыдущей главе.
Предположим, например, что нужно создать дизайн на основе двух колонок, где первая колонка имеет ширину, равную одной трети ширины страницы, а вторая — равную двум третям ширины страницы. Можно начать с создания простого кода
HTML:

… сюда помещается содержимое…

Затем можно создать несколько CSS-стилей для создания свободной разметки:
.columns {
width: auto; /* то же самое что и 100 % */
max-width: 1200px;
}
.columns:after {
content: "";
display: table;
clear: both;
}
.one-third {
float: left;
width: 33%;
}
.two-thirds {
float: left;
width: 67%;
}
Первый стиль —
.columns
— устанавливает ширину div
-контейнера, содержащего колонки. Задание для свойства width значения auto
— это то же самое, что и установ- ка для него значения
100%
, поскольку свойство max-width будет сдерживать блок от приобретения слишком большой ширины. Второй стиль —
.columns:after
— помогает

478
Часть 3. Макет страницы содержать две плавающие колонки (подробности того, как это работает, можно найти в разделе «Решение проблем плавающих элементов» гл. 13). И наконец, последние два стиля просто устанавливают ширину двух div
-контейнеров в 33 % (в ширину одной трети его контейнера) и в 67 % (две трети) и перемещают их влево, чтобы они появлялись рядом.
Важность порядка следования исходного HTML-кода
Когда вы держите телефон вертикально, то при условии сохранения читаемости страницы там просто не хватает места не только для трех, а даже для двух колонок в строке. Поэтому многие разработчики для отображения страницы в мобильном телефоне просто выкладывают ее в одной большой колонке. Для этого нужно уда- лить из создаваемых колонок все плавающие элементы. Например, если создается дизайн, состоящий из трех колонок, для дисплея настольной системы и в нем ис- пользуются плавающие элементы для позиционирования колонок рядом друг с дру- гом, нужно просто установить для свойства float таких элементов значение none
Тогда они будут отображать HTML в обычном порядке — один тег блочного уровня над другим. Это придает порядку следования исходного HTML-кода особую важ- ность. Например, у страницы могут быть две боковые панели, первая — с перечнем ссылок на родственные сайты, а вторая — с рекламой товаров, продаваемых вашей компанией. При этом основная информация, за которой, собственно, и приходят на вашу страницу, содержится в средней колонке. Один из способов раскладки всего этого по колонкам заключается в смещении первой боковой панели в качестве пла- вающего элемента влево, а второй боковой панели — вправо, позволяя основной колонке просто обтекать две остальные колонки и находиться в центре.
В понятиях HTML это будет означать, что сначала появляются два div
- контейнера боковых панелей, а затем следует тег, содержащий основную инфор- мацию. Если приспособить эту страницу под мобильные устройства, удалив ука- зание на то, что боковые панели являются плавающими элементами, то получится, что две боковые панели появятся перед основным содержимым. Вашей аудитории придется прокручивать информацию вниз по странице, чтобы пройти рекламу и ссыл- ки и добраться до нужного ей содержимого.
С точки зрения пользователей было бы лучше поместить контейнер с основным содержимым до боковых панелей. Как уже упоминалось в разделе «Использование плавающих элементов в разметках» гл. 13, этот метод может потребовать добавле- ния дополнительных контейнеров и превращения всех элементов в плавающие, включая и div
-контейнер с основным содержимым.
Короче говоря, нужно соблюдать соответствующий порядок следования HTML- кода, прежде чем создавать раскладку для многоколоночного дизайна, предназначен- ного для настольных систем. Проще всего понять, что происходит, — это просмотреть страницу вообще без применения к ней CSS. Тогда вы увидите все div
-кон тей неры и другие блочные элементы поставленными друг на друга и сможете понять, как будет выглядеть страница в виде одной колонки на телефоне.
ПРИМЕЧАНИЕ
Как можно создать дизайн, состоящий из трех колонок и предназначенный для настольных систем при условии сохранения наиболее важной информации в верхней части страницы, было показано в обучающем уроке предыдущей главы.

Глава 14. Адаптивный веб-дизайн
479
Сброс блочной модели
Как уже объяснялось в подразделе «Предотвращение выпадений плавающих элемен- тов» раздела «Решение проблем плавающих элементов» гл. 13, при использовании для указания ширины процентного отношения возникает угроза выпадения плаваю- щих элементов, когда общая ширина колонок, размещаемых в одном ряду, превыша- ет 100 %, что заставляет последнюю колонку опускаться под другие колонки. Из-за способа, который применяется браузерами для вычисления ширины элементов, до- бавление толщины границы, окружающей div
-контейнер, или его внутренних отсту- пов приводит к тому, что ширина div
-контейнера на экране становится больше той ширины, которая указана в CSS. Например, если для одной колонки задана ширина
33 %, а для другой — 67 % (как в примере, показанном выше), они должны вполне уместиться рядом друг с другом, поскольку их общая ширина составляет 100 %. Но если к колонке добавлена граница толщиной 1 пиксел, то ее общая ширина станет
100 % + 2 пиксела (учитываются левая и правая границы). Теперь эта колонка будет слишком большой, чтобы поместиться в окне, и вторая колонка выпадет под первую.
Есть несколько способов преодоления этого затруднительного положения, и все они были рассмотрены в подразделе «Предотвращение выпадений плавающих элементов» раздела «Решение проблем плавающих элементов» гл. 13. Но наиболее очевидным решением станет предписание веб-браузеру включать в общую ширину и высоту элемента границы и отступы в качестве части его вычислений в рамках блочной модели. То есть браузер можно заставить рассматривать границы и отсту- пы как составную часть CSS-свойства width
, чтобы добавление дополнительных отступов или границ не приводило к увеличению ширины (или высоты) элемента.
Поскольку такой подход желательно применить ко всем элементам, лучше вос- пользоваться универсальным селектором, позволяющим сбросить исходные пара- метры блочной модели для всех элементов, которые имеются на странице:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
В Firefox для этого свойства все еще применяется префикс производителя, по- этому здесь нужна версия
-moz-box-sizing
. А вот все остальные браузеры, включая
Internet Explorer 8 и более поздние версии, понимают версию без такого префикса.
Лучше всего поместить этот стиль в CSS-код, используемый для сброса исходных установок страницы.
ПРИМЕЧАНИЕ
Internet Explorer 7 не понимает свойство box-sizing, поэтому данный прием в нем работать не будет.
Internet Explorer 7 быстро выходит из употребления, но если вам все же нужно поддерживать этот браузер, существует несколько способов предотвращения выпадения плавающих элементов при использовании разметки на основе процентных соотношений (см. подраздел «Предотвращение вы- падений плавающих элементов» раздела «Решение проблем плавающих элементов» гл. 13).
Преобразование фиксированной ширины в гибкие сетки
При разработке совершенно нового дизайна представление процентных отношений не должно даваться слишком трудно. В конце концов, если нужны четыре колонки одинаковой ширины, для каждой из них устанавливается значение 25 %:

480
Часть 3. Макет страницы width: 25%;
Но если приходится иметь дело с дизайном веб-сайта с фиксированной шириной и нужно преобразовать его в свободный дизайн, ситуация усложняется. Для начала представим, что вы разработали страницу с фиксированной шириной 960 пикселов.
Эта страница либо заключена в тег

, для которого задана ширина 960 пикселов, либо такая ширина просто установлена для тега

. В любом случае теперь нуж- но, чтобы этот контейнер был полностью свободным. Для этого достаточно просто изменить width: 960px; на width: auto;
Установка ширины элемента на auto
— практически то же самое, что и задание для ширины значения
100%
: ширина этого элемента сравняется с шириной его кон- тейнера.
Затем нужно преобразовать параметры ширины колонок со значения в пикселах в значение в процентах. Чтобы облегчить вычисление, главный специалист по адап- тивному веб-дизайну Итан Маркотт придумал замечательную формулу: цель / кон- текст = результат. В переводе на простой язык это означает: «возьмите ширину элемента, подвергаемого преобразованию (в пикселах), и разделите ее на ширину контейнера этого элемента (в пикселах)». В результате получится дробное значе- ние, которое нужно перевести в проценты.
Рассмотрим пример. Предположим, что внутри этой страницы шириной 960 пик- селов есть две колонки: боковая панель шириной 180 пикселов и основная колонка шириной 780 пикселов. В CSS-файле имеется следующий код:
.sidebar {
float: left;
width: 180px;
}
.main {
float: left;
width: 780px;
}
Конечно, в нем присутствует множество другого кода CSS, задающего границы, фоновые цвета и т. д., но в данном случае нас интересуют только параметры ширины.
Приступая к преобразованию боковой панели, нужно взять ее ширину, равную
180 пикселам, и разделить ее на ширину контейнера этой боковой панели, равную
960 пикселам. Получившийся результат 0,1875 нужно умножить на 100 и получить процентное значение: 18,75 %. Точно так же для основной колонки 780 делится на 960, и получается 0,8125. При умножении этого результата на 100 получаем 81,25 %.
То есть изменения параметров ширины этих стилей придают им следующий вид:
.sidebar {
float: left;
width: 18.75%;
}

Глава 14. Адаптивный веб-дизайн
481
.main {
float: left;
width: 81.25%;
}
Эти новые значения не нужно округлять. То есть не превращайте 18,75 % в 19 %, поскольку это, скорее всего, приведет к тому, что колонки больше не будут стоять рядом и мы столкнемся с выпадением плавающего элемента. Браузеры хорошо справляются с десятичными значениями, и вы спокойно можете использовать лю- бые значения, возвращаемые калькулятором. Вполне допустима, скажем, ширина, заданная значением
25.48488%
То же самое применимо и к колонкам, находящимся внутри других колонок.
Предположим, например, что в показанной выше основной колонке имеется один раздел, состоящий из двух плавающих div
-контейнеров и создающий две дополни- тельные колонки внутри основной колонки. Оба div
-контейнера имеют одинаковую ширину, равную 390 пикселам, поэтому для вычисления их ширины в процентном отношении берется их текущая ширина в пикселах (390) и делится на ширину их контейнера, которая в данном примере относится к ширине основной колонки и рав- на 780 пикселам. Результат получается 0,5. Умножение на 100 дает результат 50 %.
(Но, по сути, эти вычисления не нужны. Ведь у вас имеются две стоящие рядом колонки одинаковых размеров, и вы знаете, что каждая из них занимает половину доступного пространства, или 50 %.)
После переделки дизайна и вычисления процентных значений нужно помнить, что общая ширина всех колонок в одном ряду не должна превышать 100 %.
СОВЕТ
Ту же самую формулу можно применить для преобразования размеров в пикселах в размеры в em.
Предположим, что ширина текстового абзаца составляет 18 пикселов (цель). Исходный размер обычного текста (контекст) составляет 16 пикселов. При делении 18 на 16 получаем новый размер в em: 1.125em.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
Тестирование адаптивного дизайна
Поскольку адаптивный дизайн предназначен для со
ответствия экранам различных устройств просмотра, нужно найти способ просмотра страниц на экра
нах с различной шириной. Проще всего протести
ровать медиазапросы путем просмотра страницы в браузере настольного компьютера при изменении экрана брау зера. Перетащите границу окна, сделав его тоньше, и посмотрите, что получится на каждой контрольной точке или на каждом установленном вами медиазапросе. Этот прием работает неплохо, но не все браузеры позволяют уменьшать масштаб окна до ширины 320 пикселов, характерной для не
которых телефонов.
Есть также несколько вебсредств, позволяющих про
сматривать страницы в окнах разных размеров. Сайт responsivepx (
http://responsivepx.com
) дает возмож
ность вводить URLадрес страницы в Интернете, затем указывать различные параметры ширины и высоты экрана. Этот сайт открывает страницу в

1 ... 45 46 47 48 49 50 51 52 ... 62