Skip to content

Создаем адаптивный дизайн

Недавно мы рассмотрели создание адаптивной навигации. А сегодня давайте узнаем, как создается адаптивный дизайн. В англоязычном интернете он называется Responsive design. В наше время размеры экранов колеблются от 320px (iPhone) до 2560px (большой монитор) или даже выше. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства для доступа к сети. А нам надо сделать так, чтобы всем им было удобно смотреть наш сайт. Традиционная фиксированная ширина не работает. Так давайте рассмотрим, как решить эту проблему.

Задача

Перед тем как начать посмотрите окончательное демо, и уменьшайте постепенно ширину окна браузера, чтобы увидеть, как макет автоматически перетекает в зависимости от ширины окна просмотра (ширина браузера).

responsive1

Контейнер страницы имеет ширину 980px, которая оптимизирована для любой ширины экрана больше, чем 1024px. Медиа-запросы используются для проверки ширины монитора, если она уже меньше, чем 980px, то в макете ширина будет зависеть от ширины экрана. Если ширина уже меньше, чем 650px, то макет станет одноколоночным, ширина области содержимого будет равна ширине сайдбара, а сайдбар будет показан после всего контента.

responsive2

HTML код

Ниже приведена основная структура макета. Получаем следующее DOM-дерево: Основной контейнер #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">
<!--Запись-->
</article>

</div>

<aside id="sidebar">

<section class="widget">
<!--Сайдбар-->
</section>

</aside>

<footer id="footer">
<!--Подвал-->
</footer>

</div>

HTML5.js

Обратите внимание, Internet Explorer до версии 9 не поддерживают новые теги, введенные в HTML5, таких как header, article, footer, figure и т.д. А Javscript-файл html5.js поможет IE признать новые элементы.

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

CSS

Показываем HTML5-теги

Превращаем теги HTML5 (article, aside, figure, header, footer и т.д.) в блочные элементы.

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

Основная структура CSS

Основной контейнер #pagewrap имеет ширину в 980px. Шапка имеет фиксированную высоту 160px. Содержание 600px в ширину и размещен слева. Сайдбар шириной 280px и размещен справа.

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

#header {
height: 160px;
}

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

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

#footer {
clear: both;
}

CSS3 Медиа Запросы

Сейчас здесь начинается самое интересное — запросы ширины экрана.

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

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

Сами медиа запросы

Можно создать отдельный CSS-файл под запросы, а можно добавить их в конец стандартного файла со стилями. Это уже как кому нравится.

Для просмотра с шириной экрана меньше, чем 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, site-logo и site-description = сброс position на static
  • content = сброс ширины до auto (это сделает контейнер в ширину на весь экран) и избавиться от прилипания к левому краю
  • sidear = сброс ширины до 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;
}

}

Экран меньше, чем 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;
}

}

Гибкость изображений

Для того, чтобы изображения адаптировались к изменению размера экрана, просто добавьте картинкам следующие css-стили:

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

Максимальная ширина в 100% и автоматическая высота работает в IE7, но не работает в IE8 (да, еще странная ошибка IE). Чтобы это исправить, нужно добавить width: auto.

Гибкость видео

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

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

По умолчанию iPhone Safari сжимает HTML страницы, чтобы вписаться в экран iPhone. Следующий мета-тег говорит iPhone Safari использовать ширину устройства в качестве ширины окна и отключить масштабирование.

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

Заключение

responsive1

Посмотрите еще раз демонстрацию и изменяйте размеры окна браузера, чтобы увидеть работу медиа запросов в действии. Не забудьте проверить демонстрацию со смартфонов и планшетов, чтобы увидеть мобильную версию макета.

Оригинал на английском языке — Web Designer Wall