Технологии не стоят на месте, все продолжает эволюционировать, десятилетие назад мы не знали что такое смартфон или планшет, а в сегодняшнее время мы не можем себе представить жизнь без них. Интернетом пронизан каждый гаджет, уже рядовой пользователь на обычном телефоне может зайти в интернет и прочитать последнюю сводку новостей масс-медиа, это все хорошо, но с эволюцией рынка технологий должен и развиваться рынок сайтостроения. Заказчики становятся более требовательными, им подавай передовые технологии, и возможность качественного отображения.
Основная проблематика верстки сайта является его правильная адаптация для различных экранов. В данном уроке мы рассмотрим как создать макет сайта с помощью 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 в действии.
Источник