0,0
рейтинг
12 мая 2011 в 10:43

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

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

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


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



Другие примеры


Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress, которые я сделал используя media queries: iTheme2, Funki, Minblr и Wumblr.

Обзор


Контейнер страницы имеет ширину 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, такие как <header>, <article>, <footer>, <figure> и прочие. Поэтому подключаем 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;
}

Шаг 1


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

CSS3 Media Queries


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

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


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

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


Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают 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;
}

Initial Scale Meta Tag (iPhone)


По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.
<meta name="viewport" content="width=device-width; initial-scale=1.0">

Финальное Демо


Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

Перевод: Web Designer Wall
Константин Жандов @kostos
карма
66,3
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (32)

  • 0
    Отлично! Как раз сегодня пригодится!
  • 0
    Как то раз наткнулся на сайт, демонстрирующий такого рода сайты, потом куда то потерял. Спасибо что напомнили.
  • +1
    Весьма интересно, как это будет работать в Opera Mini.
    • 0
      Так и будет, как задумано.
    • +1
      У самой Opera Software все их сайты и внутренние странички браузера (ошибки там) так работают уже лет сто. CSS queries — кагбе боян.

      А самое важное в статье упущено — CSS queries для разных DPI. Совсем свежак, недавно появилось, но очень актуально.
  • 0
    На windows phone 7 выглядит отлично, за исключением видео превьюшки.
  • 0
    Классна штука
  • +2
    В подкасте "сделайте мне красиво" всплывала ссылочка на коллекцию сайтов которые поддерживают Media Queries. Очень познавательно, рекомендую.
  • 0
    Как же хочется чтобы все это работало прямо в HTML и CSS без всяких плагинов
    • +2
      Так это и работает прямо в HTML и CSS, без всяких плагинов. Только в новых браузерах. А для старых небольшие костыли, так было, так будет. Впрочем конкретно для этого примера два лишних скриптика включить совсем несложно.
  • 0
    На iPad откройте в landscape поверните в portrait и обратно в landscape
    • +1
      Не у всех есть iPad-ы, не могли бы просветить что произойдет?
      • +1
        Произойдёт zoom, где-то 25% страницы справа окажется вне поля зрения.

        Недавно подгонял кое-что под iPad и iPhone — обнаружилось что отключение скейла не по душе некоторым пользователям iPhone, которые привыкли видеть миниатюру нормальной страницы и скейлить её там где им нужно
        • +10
          Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

          На правах оффтопа:
          Почему когда IE отображает что то не так как остальные все кричат что это проблема IE и т.д.
          если айпад отображает что то не так — это проблема верстальщика а не айпада :)
          • 0
            > Потестил на Nook Color — андроид планшете с разрешением 1024х600 (вроде у айпада такое же) в стоковом браузере — все ок отображается как надо.

            Дело не в разрешении, этот баг есть только в Safari на iPad habrahabr.ru/blogs/webdev/119127/#comment_4471001
    • +2
      Кстати, для iPad, iPhone можно сделать так:

      /*normal styles here */
      #wrap {
      width:1024px;
      }
      @media only screen and (orientation:portrait){
      /* portrait styles here */
      #wrap {
      width:768px;
      }
      }

      matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
      • 0
        главное не забывать, что содержимое
        @media only screen and (orientation:portrait)
        сработает не только на iPad, но и на других устройствах

        @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
        сработает на любом соответствующем маленьком экране

    • 0
      Ага тоже недавно делал дизайн по iPad используя CSS3 Media Queries. Немного помучался ввиду отсутствия самого устройства на руках, но в итоге все удачно.
    • 0
      Это баг Safari, решается с помощью небольшого js — wedeal.ru/blog/oshibka-safari-na-ipad-pri-povorote-iz-portrait-v-landscape/
  • +1
  • 0
    Подтверждаю, на айпаде в ландшафтном режиме жесть.
  • 0
    Первые два случая (normal и narrow) для этого макета вполне можно объединить кодом второго с заданым для контейнера max-width.
  • 0
    Вот на андроиде и в портретном и ландшафтном, всё ок. В том числе при повороте.
  • +1
    Для совместимости со старыми браузерами, не проще использовать доп. класс для каждого макс. разрешения, скажем .w650 .w480, и добавлять его в требующиеся элементы javascript'ом в начале, проверив ширину окна (window.screen.width)? Все же меньше 16 кб для css3-mediaqueries.js выйдет, да и быстрее.
  • 0
    Сайт W3C использует что-то похожее.
  • +2
    Спасибо, полезно.

    После прочтения начал искать более умный js, потому что этот кроссбраузерный (очень много проверок), а подключается через условные комментарии. Можно срезать наверное 1/4.
    Да и в 94% случаев используется jQuery, а в скрипте, например, свой DOMReady.

    И вот случайно нашел презентацию:
    www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu?from=ss_embed

    Очень интересный взгляд. Никогда не думал о дизайне сайта начиная с мобильной версии и прогрессивного улучшения до десктопной.
  • 0
    Хорошо выглядит на iPhone 2G с iOS 3.1.3. Читабельно, увеличивать куски страницы не надо.
    Только вот при переходе из портретной в ландшафтную ориентацию срезается около четверти и приходится делать щипок по экрану, чтобы опять увидеть всё.
    Возьму на вооружение этот скрипт для будущих проектов.
  • 0
    > Сбрасываем HTML5 элементы в block

    Сбрасывать — это избавляться от чего-то, а не добавлять display:block.
  • 0
    не хватает описания правил CSS для печати документа — чтобы при выводе на печать выводилось только содержимое div id=«content» (ну и адрес сайта)
  • 0
    Что-то не работает в IE8
    • 0
      Что-то не работает в IE8

      Есть подозрение, что нужно сменить полузаброшенный css3-mediaqueries.js на respond.js — Responsive web design и Internet Explorer

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.