|
|
Книга css3 3е издание Серия Бестселлеры OReilly
веб-страницы добавить следующий код (самое под- ходящее место для этого — непосредственно перед тегом
<br>):<br>Метатеги HTML предоставляют дополнительную информацию о содержимом страницы и могут дать браузерам дополнительные инструкции о способах отобра- жения страницы на дисплее. В данном случае viewport обозначает экран браузера, а для атрибута content устанавливается ширина экрана браузера, равная ширине экрана смартфона. То есть браузерам мобильных устройств, склонным к уменьше- нию масштаба, предписывается этого не делать, настроив ширину экрана на теку- щую ширину дисплея смартфона.<br>ПРИМЕЧАНИЕ<br>Кроме использования метатега viewport, есть еще один способ заставить смартфон не предприни- мать попыток сжатия вашей страницы, а вывести вместо этого ее в 100%-ном размере. Разработ- чики из CSS Working Group добавили к CSS правило @viewport, которое позволяет делать все то же самое, что и с метатегом viewport, но в вашей таблице стилей. Благодаря этому можно отка- заться от добавления тега к каждому HTML-файлу сайта и просто добавить одно правило <br>@viewport к своей таблице стилей:<br>@viewport { width: device-width; }<br>Это правило нужно добавить в самом начале таблицы стилей до объявления самих стилей. К сожа- лению, в настоящее время правило @viewport еще не работает на всех браузерах и требует для тех браузеров, которые его не понимают, добавлять префикс производителя. Дополнительные сведения о правиле @viewport можно получить на сайтах http://dev.opera.com/articles/view/an-introduction-to- meta-viewport-and-viewport/ и http://dev.w3.org/csswg/css-device-adapt/.<br><b>Медиазапросы</b><br>В CSS3 введено такое понятие, как <i>медиазапросы</i>. Они позволяют назначать стили страницам на основе ширины и высоты окна целевого браузера. Используя данный метод, можно создавать пользовательские стили для браузеров мобильных телефо- нов, планшетных и настольных компьютеров и тем самым настраивать представле- ние сайта таким образом, чтобы он выглядел наилучшим образом на каждом типе устройства.<br>Смысл адаптивного дизайна состоит в том, чтобы дать посетителям вашего сайта наиболее читаемое и привлекательное представление. Обычно это означает настрой- ку дизайна под наилучший вид на окнах браузеров различной ширины. Многие <br></div> <div> <br><b>468 </b><br>Часть 3. Макет страницы <a href="/bitrix-upravlenie-sajtom-vipolnili--lapkina-anastasiya/index.html" title="Bitrix Управление Сайтом Выполнили : лапкина анастасия">разработчики ориентируются на три целевых экрана</a>, относящихся к трем наиболее распространенным устройствам просмотра веб-содержимого: смартфонам, планшет- ным и настольным компьютерам. При условии существования широкого разнообра- зия размеров экранов этих устройств (у вас могут быть небольшие телефоны, боль- шие телефоны, 7-дюймовые планшетные компьютеры, 10-дюймовые планшетные компьютеры и т. д.) единой ширины для всех этих устройств не существует. Нужно просто иметь в виду, что целью является хороший внешний вид страницы при раз- личной ширине экрана. Можно просто протестировать различные дизайнерские решения при окнах различной ширины, чтобы увидеть, когда дизайн в четыре ко- лонки должен превращаться в дизайн в две или в одну колонку. <br><b><span id='Стратегии_использования_медиазапросов'>Стратегии использования медиазапросов</span></b><br>Хотя для принятия решения о внесении изменений в дизайн, позволяющего придать ему наиболее удачный внешний вид на различных устройствах, рекомендуется ис- пользовать метод проб и ошибок, существует несколько общих стратегий медиаза- просов.<br><br><b><span id='Настройка_количества_колонок_(столбцов).'>Настройка количества колонок (столбцов).</span></b> Несколько расположенных в ряд колонок неплохо смотрятся на больших мониторах (и даже на планшетных компьютерах в альбомном режиме), но не подходят для телефонов. Кроме того, четырех колонок, наверное, будет многовато для большинства планшетных ком- пьютеров в книжном режиме экрана, поэтому сведение страницы к двум или трем колонкам, по всей видимости, вполне подходит для медиазапросов, наце- ленных на планшетные компьютеры. Исключение плавающих элементов в сти- лях медиазапросов, предназначенных для планшетных компьютеров, позволя- ет ставить контейнеры с содержимым страницы друг на друга. Эта технология будет рассмотрена в обучающем уроке этой главы.<br><br><b><span id='Гибкие_параметры_ширины.'>Гибкие параметры ширины.</span></b> Дизайн с фиксированными параметрами ширины можно использовать для браузеров настольных компьютеров. Именно так годами и поступали дизайнеры, но для более узких экранов планшетных компьютеров и телефонов элементы с фиксированным дизайном не поместятся в окно. Страни- ца шириной 960 пикселов будет слишком большой для имеющихся у телефонов <br>320 или 480 пикселов. Для телефонов и планшетных компьютеров более удачным подходом будет установка параметров ширины div<br>-контейнеров с содержимым на <br>Auto или на <br>100%<br>. Эти установки превратят дизайн вашей страницы из фиксиро- ванного в свободный или гибкий. Иными словами, независимо от ширины экрана телефона, div<br>-контейнеры поместятся на нем на все 100 %. Если человек держит iPhone в книжном режиме (при ширине экрана 320 пикселов), а затем быстро поворачивает телефон горизонтально (изменяя ширину экрана до значения 480 пик- селов), div<br>-контейнеры, настроенные на <br>Auto или на <br>100%<br> просто изменят свой раз- мер, чтобы поместиться в новом пространстве.<br><br><b><span id='Сжатие_пустых_пространств.'>Сжатие пустых пространств.</span></b> Обширные пустоты между заголовками, графи- кой и другими элементами страницы дают свободное пространство для дизай- нерских решений на 23-дюймовом мониторе, но приводят к разбросанности и не- рационально использованному пространству на небольших телефонных экранах, заставляя посетителей чаще прибегать к прокрутке. Сужение полей и отступов <br></div> <div> <br>Глава 14. Адаптивный веб-дизайн<br><b>469</b><br>позволяет поместить на таких небольших экранах больше полезной информа- ции.<br><br><b>Настройка размеров шрифтов.</b> Контраст между большими жирными заголов- ками и набранным мелким шрифтом основным текстом неплохо выглядит на мониторах настольных компьютеров, но на портативных устройствах излишне крупные заголовки труднее читаются и совершенно необоснованно занимают полезное пространство. А вот некоторое укрупнение на телефонах шрифта ос- новного текста зачастую облегчает его чтение. Иначе говоря, создавая стили медиазапросов, обращайте внимание на размеры шрифтов.<br><br><b><span id='Изменение_навигационных_меню.'>Изменение навигационных меню.</span></b> У вас может быть красиво оформленная го- ризонтальная панель навигации, которая занимает всю верхнюю часть веб-стра- ницы и состоит из десятка кнопок, направляющих посетителей на просмотр разных разделов вашего сайта. К сожалению, по мере сужения окна браузера эти кнопки могут не поместиться на экран. Они разобьются на нем на две, три и более строки. Пример такого явления будет показан в обучающем уроке дан- ной главы. Возможно, в том, что навигационная панель займет не одну, а не- сколько строк экрана, не будет ничего страшного, но ведь эта панель может занять в верхней части страницы слишком много места, <a href="/zadejstvovate-blijajshie-gidranti-gorodskie-raspolojennie-po-a/index.html" title="Задействовать ближайшие гидранты городские, расположенные по адресу">заставляя пользовате- лей задействовать прокрутку</a>, чтобы добраться до первых строк реального ин- формационного наполнения. <br>К сожалению, в CSS не предлагается простых и понятных решений этой про- блемы. На многих сайтах для динамического превращения навигационного меню в раскрывающееся HTML-меню используется JavaScript. В таком случае это меню занимает весьма небольшое пространство экрана (чтобы этому на- учиться, обратитесь по адресу http://css-tricks.com/convert-menu-to-dropdown/<br>). <br>Но есть и другие решения. Обзор различных подходов к преодолению этой про- блемы, применяемых на некоторых сайтах, дан на страницах http://bradfrostweb.<br>com/blog/web/responsive-nav-patterns/<br> и http://bradfrostweb.com/blog/web/complex- navigation-patterns-for-responsive-design/<br><br><b><span id='Скрытие_содержимого_на_портативных_устройствах.'>Скрытие содержимого на портативных устройствах.</span></b> Многие разработчики скрывают содержимое в мобильных версиях сайтов. На мониторе настольного компьютера просмотр нескольких колонок и сотен строк текста дается довольно легко, а вот слишком много информации на телефоне может показаться совершен- но излишним. CSS можно использовать для того, чтобы просто скрыть содержи- мое, которое, на ваш взгляд, не нужно показывать пользователям мобильных устройств, для чего требуется установить для CSS-свойства display значение none<br>Но все же нужно иметь в виду, что, скрывая содержимое, вы отстраняете по- сетителя от той информации, которая предоставляется на вашем сайте. Для тех, кто ранее посещал ваш сайт, используя настольный компьютер, а теперь посе- щает его же с помощью телефона, будет крайне неприятно увидеть, что совсем недавно просматриваемая ими важная информация теперь куда-то исчезла. <br>Кроме того, даже если вы скроете содержимое с помощью CSS, сам код HTML никуда не денется, заставляя мобильный телефон впустую тратить время и тра- фик на загрузку неиспользуемого HTML.<br></div> <div> <br><b>470 </b><br>Часть 3. Макет страницы<br><br><b>Использование фонового изображения.</b> Если поместить на экран 960-пиксель- ный баннер, то ни один телефон не покажет его без сжатия. Можно, конечно, <a href="/kompoziciya-rasskaza/index.html" title="Композиция рассказа">предоставить достаточно небольшое изображение</a>, способное поместиться на экране телефона, или же воспользоваться вместо него фоновыми изображени- ями CSS. Можно, например, создать div<br>-контейнер и добавить к нему следу- ющий класс: <br><div ><br>. Затем в таблице стилей для браузера настоль- ного компьютера установить ширину и высоту div<br>-контейнера, соответствующую размеру большого логотипа, используя свойство background-image для вставки изображения в фон. Например:<br> .logo {<br> width: 960px;<br> height: 120px;<br> background-image: url(images/large_logo.png)<br> }<br>Затем можно поместить в эту таблицу стилей еще один стиль, используемый для мобильных телефонов, который изменяет размеры div<br>-контейнера и ис- пользует другое фоновое изображение:<br> .logo {<br> width: 320px;<br> height: 60px;<br> background-image: url(images/small_logo.png)<br> }<br>В разделе «Изменчивые изображения» данной главы вы научитесь масштаби- ровать изображения, вставляемые в HTML с помощью тега <br><img><br>, чтобы они помещались в окна браузеров различной ширины.<br>ПРИМЕЧАНИЕ<br>Обзор различных стратегий, которыми можно воспользоваться для изменения раскладки страницы для различных устройств, можно найти по адресу www.lukew.com/ff/entry.asp?1514.<br><b><span id='Создание_контрольных_точек'>Создание контрольных точек</span></b><br>Медиазапросы позволяют отправлять браузерам различные стили на основе ши- рины экранов этих браузеров. Например, браузеру можно сказать следующее: <br>«Если твой экран шире 480 пикселов, применяй эти стили» или «Если твой экран шире 480 пикселов, но уже 769 пикселов, применяй эти стили». Различные значе- ния ширины, указываемые вами, — 480, 769 и т. д. — в адаптивном дизайне часто называют контрольными точками (breakpoints). А с каких вообще значений нужно начинать разбивать дизайн на контрольные точки?<br>Проще всего это определить, если взять готовый дизайн для настольного ком- пьютера и открыть страницу в веб-браузере. Захватите щелчком кнопки мыши точку регулирования размера окна и медленно уменьшайте ширину окна. В опре- деленный момент страница приобретет совершенно неприглядный вид. Например, станет тесно ее четырем колонкам. Точка, в которой дизайн теряет приемлемый внешний вид, становится хорошим кандидатом на контрольную точку, то есть этот размер вполне подходит для определения нового медиазапроса и для загрузки но- вых стилей, чтобы удалить одну или две колонки.<br></div> <div> <br>Глава 14. Адаптивный веб-дизайн<br><b>471</b><br>Нередко создаются три набора медиазапросов для трех различных контрольных точек — один для смартфонов, другой для планшетных компьютеров, а третий для настольных мониторов. Конкретные значения контрольных точек зависят от кон- кретного дизайна (а также от конкретного устройства), но <a href="/laboratornaya-rabota--import-dannih-import-dannih-yavlyaetsya/index.html" title="Лабораторная работа № Импорт данных Импорт данных является отправной точкой анализа данных. Импорт в Deductor">чаще всего отправной точкой служит экран</a>, имеющий ширину меньше 480 пикселов, который получает один набор стилей, экран шириной между 481 и 768 пикселами получает второй набор стилей, а все, что по ширине больше 768 пикселов, получает дизайн, предна- значенный для настольных компьютеров. Но все это в конечном счете остается на ваше усмотрение. Некоторые дизайнеры допускают расширение зоны планшетных компьютеров до 1024 пикселов, а стили для настольных компьютеров начинают отправлять тем браузерам, чья ширина окна превышает 1024 пиксела. <br>Некоторые дизайнеры даже доходят до определения четырех или пяти кон- трольных точек, чтобы их творения хорошо смотрелись на более широком диапа- зоне экранов. Подробности определения порядка создания этих контрольных точек с использованием медиазапросов будут рассмотрены в подразделе «Создание ме- диазапросов» данного раздела.<br><b><span id='Для_чего_сначала_разрабатывать_дизайн:_для_настольных_или_для_мобильных_систем'>Для чего сначала разрабатывать дизайн: для настольных </span></b><br><b>или для мобильных систем?</b><br>Следует рассмотреть еще один вопрос: с расчетом на какое устройство нужно при- ступать к разработке дизайна? Вам не нужно создавать три отдельных набора сти- лей по одному для каждого из устройств, на которые вы нацелены. Вы можете и должны сначала создать исходный дизайн, то есть дизайн, работающий без ме- диазапросов. Затем можно создать стили медиазапросов для замены исходных стилей и переформатирования страницы под конкретную ширину экрана. Для это- го существуют два основных подхода.<br><br><b><span id='Предпочтение_настольным_системам.'>Предпочтение настольным системам.</span></b> Дизайн сайта можно разрабатывать с прицелом на настольные системы. Введите все требуемые колонки. Отра- ботайте дизайн до совершенства, чтобы он хорошо выглядел на большом мо- ниторе. Теперь это будет ваш исходный дизайн. Все стили можно убрать во внешнюю таблицу стилей и привязать эту таблицу к страницам вашего сайта обычным образом.<br>Затем добавьте медиазапросы для планшетных и телефонных устройств. Стили этих медиазапросов будут подстраивать дизайн для настольных систем под но- вые условия — удалять колонки, уменьшать шрифт заголовков и т. д. Преиму- щество такого подхода в том, что браузеры, не понимающие медиазапросов, получат основные стили для настольных систем. Большинство телефонов по- нимают медиазапросы, но устаревающие браузеры настольных систем, напри- мер Internet Explorer 8 и более ранние версии, их не понимают. Следовательно, подход, при котором предпочтение отдается настольным системам, означает, что Internet Explorer 8 получит нужные ему стили для создания полноценной презентации на настольных системах.<br><br><b><span id='Предпочтение_мобильным_системам.'>Предпочтение мобильным системам.</span></b> Можно сделать все наоборот и сначала разработать дизайн для мобильных систем. В таком случае в обычную внешнюю таблицу стилей помещаются основные стили, предназначенные для небольшого <br></div> <div> <br><b>472 </b><br>Часть 3. <a href="/razmetka-stranici-v2/index.html" title="«Разметка страницы»">Макет страницы экрана</a>, а потом в медиазапросах дизайн дорабатывается для планшетных и на- стольных устройств путем добавления колонок и других корректировок для больших экранов.<br>Какой бы метод вы ни выбрали, нужно использовать обычную внешнюю таблицу стилей, привязанную к веб-странице обычным образом. В эту таблицу стилей вклю- чаются все стили, являющиеся общими применительно к различным устройствам. <br>Например, для всех версий сайта требуются одинаковая цветовая палитра и одинако- вые шрифты. Можно также использовать одинаковые стили для ссылок, изображений и других HTML-элементов. Иными словами, вам не нужно создавать для каждого устройства три абсолютно отдельных набора стилей, начните с одного набора, приме- няемого ко всем браузерам как телефонов, так и планшетных и настольных систем, а затем уточните дизайн для устройств, на которые нацелены медиазапросы.<br><b>Создание медиазапросов</b><br>Запрос представляет собой вопрос, заданный веб-браузеру: «Равна ли ширина эк- рана 480 пикселам?» Если ответ положительный, браузер запускает таблицу сти- лей именно для устройства с данной шириной экрана (предоставляемая вами таб- лица стилей, рассмотренная ранее). Код, выполняющий эту задачу, очень похож на код для любой внешней таблицы стилей:<br><link href="css/small.css" rel="stylesheet" media="(width: 480px)"><br>К этой стандартной ссылке на таблицу стилей добавился только еще один атрибут media<br>, устанавливающий условия, при которых браузер использует указанную табли- цу. В показанном выше примере браузер загружает внешнюю таблицу стилей small.<br>css<br>, когда кто-нибудь просматривает ваш сайт с помощью браузера, ширина окна ко- торого составляет 480 пикселов. Скобки вокруг запроса — <br>(width: 480px)<br> — являются обязательным элементом. Если их не поставить, браузер проигнорирует запрос.<br>ПРИМЕЧАНИЕ<br>Медиазапросы понятны большинству <a href="/ponyatie-i-vidi-brauzerov/index.html" title="Понятие и виды браузеров">браузеров мобильных и настольных устройств</a>, но непонятны <br>Internet Explorer 8 и более ранним версиям. Устаревшие версии Internet Explorer можно заставить понимать ваши медиазапросы, если добавить к тегу </link></div> |
|
|
Скачать 20.28 Mb.