Посмотреть демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.
Ознакомление
Перед началом работы давайте сначала ознакомимся с принципом работы шаблона. Измените размер окна вашего браузера, и вы увидите, как сайт также автоматически изменяется в размере.
Больше примеров
Если вам нужно больше примеров, ознакомьтесь со следующими шаблонами WordPress, которые также были разработаны при помощи media queries: iTheme2, Funki, Minblr и Wumblr.
Обзор
Само содержание страницы спрятано в контейнер шириной в 980 пикселей – оно является самым оптимальным для любого разрешения выше 1024 пикселей. Media Query используется для проверки, не использует ли посетитель разрешение ниже заданного, и если да, то шаблон автоматически превращается в резиновый. Если окно просмотра уже заданного, например ниже 650 пикселей, то шаблон расширяет основной блок и боковую панель на максимальную ширину, превращаясь в колонну.
HTML-код
Мы не будем подробно описывать код HTML. Ниже мы привели основную структуру разметки. Здесь имеется контейнер «pagewrap», который охватывает все элементы вместе: header, content, sidebar и footer.
<div id="pagewrap">
<header id="header">
<hgroup>
<h1 id="site-logo">Demo</h1>
<h2 id="site-description">Site Description</h2>
</hgroup>
<nav>
<ul id="main-nav">
<li><a href="#">Home</a></li>
</ul>
</nav>
<form id="searchform">
<input type="search">
</form>
</header>
<div id="content">
<article class="post">
blog post
</article>
</div>
<aside id="sidebar">
<section class="widget">
widget
</section>
</aside>
<footer id="footer">
footer
</footer>
</div>
HTML5.js
Учтите, что в демо мы используем вёрстку на HTML5. Internet Explorer версией ниже 9-ой вряд ли будет поддерживать предложенные в HTML5 элементы типа «header», «article», «footer», «figure» и так далее. Включив в код javascript-файл html5.js, мы сделаем так, чтобы IE начал распознавать новые элементы.
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
CSS-код
Сбрасываем HTML5-элементы к блочным
Следующий код CSS сбросит параметры HTML5-элементов (article, aside, figure, header, footer и так далее), и сделает их блочными.
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
Основная структура CSS-кода
Опять же, мы не будем вдаваться в подробности. Основной контейнер "pagewrap" имеет ширину в 980 пикселей. У шапки фиксированная высота в 160 пикселей. Контейнер "content" выровнен по левой стороне и имеет ширину в 600 пикселей. Элемент "sidebar" выровнен по правой стороне и имеет ширину в 280 пикселей.
#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
Этап 1 - Демо
Вот демо-версия нашего дизайна. Учтите, что здесь мы ещё не внедрили media queries. Измените размер браузера, и вы увидите, что элементы не изменяются в размерах.
Внедрение CSS Media Query
Здесь начинается веселье – media queries!
Внедрение javascript Media Queries
Internet Explorer версии 8 и раньше не поддерживает media queries в CSS. Вы можете подключить поддержку путем интеграции javascript-файла css3-mediaqueries.js.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Внедрение CSS-кода для Media Queries
Создаём новую таблицу стилей для media query.
<link href="media-queries.css" rel="stylesheet" type="text/css">
Создание резинового шаблона для адаптации к разрешению меньшему, чем 980 пикселей
Если видимая область страницы уже 980 пикселей, то будет применено следующее правило:
pagewrap = сброс ширины до 95%
content = сброс ширины до 60%
sidebar = сброс ширины до 30%
Подсказка: используйте процентные значения для того, чтобы контейнеры были резиновыми.
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
Создание резинового шаблона для адаптации к разрешению меньшему, чем 650 пикселей (шаблон в одну колонку)
Далее у нас есть следующий код CSS для случаев, когда видимая область браузера уже 650 пикселей:
header = сброс высоты до auto
searchform = перемещение формы поиска на 5 пикселей вверх
main-nav = сброс расположения до статического
site-logo = сброс расположения до статического
site-description = сброс расположения до статического
content = сброс ширины до auto (это сделает так, чтобы шаблон растягивался по максимуму), избавление от выравнивания
sidebar = сброс ширины до 100% и избавление от выравнивания
@media screen and (max-width: 650px) {
#header {
height: auto;
}
#searchform {
position: absolute;
top: 5px;
right: 0;
}
#main-nav {
position: static;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
}
Адаптация к разрешению меньшему, чем 480 пикселей
Следующий код CSS применим в случаях, когда видимая область уже 480 пикселей (ширина экрана iPhone при горизонтальном положении).
Html = отключение возможности изменения размера текста. По умолчанию iPhone увеличивает размер так, чтобы его было удобнее читать. Вы можете отключить эту функцию, добавив -webkit-text-size-adjust: none;
main-nav = сброс размера текста на 90%.
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
Резиновые изображения
Для того чтобы сделать изображения резиновыми, просто добавьте max-width:100% и height:auto – это будет работаеть в IE7, но не будет работать в 8-й версии (ага, ещё один баг в браузере IE). Для исправления вам нужно добавить width:auto\9.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Резиновые встроенные видео-ролики
Для того чтобы сделать видео-ролики резиновыми, вам нужно применить тот же трюк, приведенный выше. По непонятным причинам, max-width:100% (для элемента embed) не работает в Safari. Для исправления, нужно просто добавить width:100% вместо max-width.
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
Основной мета-тэг масштабирования (iPhone)
По умолчанию, Safari в iPhone обрезает страницы HTML для того, чтобы они влезли в видимую область браузера. Следующий мета-тэг будет сообщать Safari, чтобы тот использовал ширину устройства в качестве ширины видимой области, и отключал основную функцию масштабирования.
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Завершение
Ознакомьтесь с финальным демо и попробуйте изменить размер окна браузера, чтобы увидеть media query в действии. Не забудьте также проверить демо посредством iPhone, iPad, Blackberry (желательно использовать более свежие продукты), а также мобильных телефонов на базе Android, чтобы увидеть мобильную версию в демо.
Итого
* Откат с помощью javascript Media Queries:
Для включения поддержки у браузеров, не поддерживающих media query, нужен файл css3-mediaqueries.js.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
* Media Queries на CSS:
Трюк для создания адаптивного дизайна заключается в том, чтобы, посредством CSS, переписать структуры шаблона.
@media screen and (max-width: 560px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
* Резиновые изображения:
Используйте max-width:100% и height:auto для того, чтобы сделать изображения резиновыми.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
* Резиновые встроенные видео-ролики:
Используйте width:100% and height:auto для того, чтобы сделать видео-ролики резиновыми.
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
* Масштабирование текста для WebKit:
Используйте -webkit-text-size-adjust:none для того, чтобы отключить масштабирование текста в iPhone.
html {
-webkit-text-size-adjust: none;
}
* Сброс встроенной функции масштабирования в iPhone:
Последующий мета-тэг сбрасывает параметры видимой области и встроенной функции масштабирования в iPhone:
<meta name="viewport" content="width=device-width; initial-scale=1.0">