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

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

Шаг 1. HTML

Не будем останавливаться на подробном описании HTML. Ниже описана основная структура макета. У меня есть «pagewrap», который включает в себя «header», «content», «sidebar» и «footer».

Internet Explorer версией ниже 9-ой вряд ли будет поддерживать предложенные в HTML5 элементы типа «header», «article», «footer», «figure» и так далее. Включив в код javascript-файл html5.js, мы сделаем так, чтобы IE начал распознавать новые элементы.

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

Шаг 2. CSS

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

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

CSS3 Media Queries

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

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

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

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

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

  • pagewrap = ширина 95%;
  • content = ширина 60%;
  • sidebar = ширина 30%.

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

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

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

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

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

Этот CSS будет применяться для размера экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.

  • html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
  • main-nav = сбрасываем размер шрифта до 90%.

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

Чтобы сделать изображения эластичными, просто добавьте max-width:100% и height:auto. Изображения max-width:100% и height:auto работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить width:auto\9 для IE8.

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

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

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

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.