Создание адаптивного дизайна сайта на CSS3

Технологии не стоят на месте, все продолжает эволюционировать, десятилетие назад мы не знали что такое смартфон или планшет, а в сегодняшнее время мы не можем себе представить жизнь без них. Интернетом пронизан каждый гаджет, уже рядовой пользователь на обычном телефоне может зайти в интернет и прочитать последнюю сводку новостей масс-медиа, это все хорошо, но с эволюцией рынка технологий должен и развиваться рынок сайтостроения. Заказчики становятся более требовательными, им подавай передовые технологии, и возможность качественного отображения.

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

Шаг 1. 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>

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]-->

С разметкой мы закончили, теперь рассмотрим стили.

Шаг 2. CSS

Следующий код CSS сбросит параметры HTML5-элементов (article, aside, figure, header, footer и так далее), и сделает их блочными.

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.

#pagewrap {
 width: 980px;
 margin: 0 auto;
}

#header {
 height: 160px;
}

#content {
 width: 600px;
 float: left;
}

#sidebar {
 width: 280px;
 float: right;
}

#footer {
 clear: both;
}

CSS3 Media Queries

Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js.

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Внедрение javascript Media Queries

Создаем новый CSS файл для media queries.

<link href="media-queries.css" rel="stylesheet" type="text/css">

Размер экрана меньше 980px (резиновый макет)

Для размера экрана меньше 980px применим следующие правила:

• 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;
 }
}

Размер экрана меньше 650px (одноколоночный макет)

Затем, задаем CSS правила для размера экрана меньше 650px.

• header = сбрасываем высоту в auto;
• searchform = позиционируем — 5px сверху;
• main-nav = сбрасываем позиционирование в static;
• site-logo = сбрасываем позиционирование в static;
• site-description = сбрасываем позиционирование в static;
• content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
• sidebar = устанавливаем ширину 100% и убираем float.

@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;
 }
}

Размер экрана меньше 480px

Этот CSS будет применяться для размера экрана меньше 480px, которая соответствует ширине 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. Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Создаем эластичные встраиваемые видео

Для видео применяем те же правила, как для изображений. По непонятным причинам max-width:100% (для видео) не работает в Safari. Нужно использовать width: 100%.

.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}

Основной мета-тэг масштабирования для iPhone

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Поизменяем размер экрана, что бы увидеть media queries в действии.
Источник