Адаптивный и мобильный дизайн с CSS3 Media Queries

Для начала посмотрим это в действии.

Если вы отлично умеете верстать, то это не делает вас отличным верстальщиком не зная медиа запросы! Сейчас, когда в моду вошли адаптивные шаблоны, каждый верстальщик должен уметь сделать свой адаптивный шаблон.
Пред началом посмотрите на финальное демо, что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна.

Обзор

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


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, такие как и прочие. Поэтому подключаем Javascript файл html5.js в HTML документ, который позволит IE понимать новые элементы. 
Код
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

Сбрасываем HTML5 элементы в block

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

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

Описываем основную структуру в CSS

Я снова не буду вдаваться в подробности. Основной контейнер «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;
}/code]

Шаг 1

На первом шаге в демо не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.

CSS3 Media Queries

Теперь начинается самое интересное – media queries.

Подключаем Media Queries Javascript

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

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


Подключаем CSS media queries

Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries.
Код
<link href="media-queries.css" rel="stylesheet">


Размер экрана меньше 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;
  }
}/code]

Эластичные изображения

Для того, чтобы сделать изображения эластичными, просто добавьте 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; 
}

Initial Scale Meta Tag (iPhone)

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

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

  • FalleN

  • 4216

  • 1

  • 230

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!