Отзывчивый веб-дизайн – это технология верстки дизайна макета сайта, которая позволяет корректно отображать сайт на всех устройствах различных разрешений и форматов, имеющих подключение к интернет. Например: мониторы, планшеты, ноутбуки, смартфоны, телевизоры.
Главными причинами возникновения и развития технологий стали появление множества разных разрешений устройств с возможностью подключения к интернет и растущая популярность мобильных устройств с возможностью подключение к интернет, а также увеличение мобильного интернет-трафика.
Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design) ввел Итан Маркотт в одной из статей в мае 2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design» («Отзывчивый веб-дизайн»), посвященную данной технологии.
Основная идея отзывчивых веб-сайтов – использование резиновой сетки (когда содержимое растягивается по ширине окна, а ширина элементов задается в процентах) и использовании медиа-запросов.
Медиа-запросы позволяют включать и отключать различные стили, в зависимости от ширины контейнера. Для определения медиа-запроса в CSS-документе используется следующий селектор:
@media only screen and (max-width : 480px)
{
}
После применения такого селектора, сайт может выглядеть по-разному в различных форматах:
Чтобы заставить медиа-запросы работать на мобильных устройствах с большим разрешением, задаются параметры viewport, которые говорят о том, что размер страницы устанавливается на основе ширины устройства:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
В своей книге Итан Маркотт описал три принципа отзывчивого дизайна:
Для отзывчивого веб-дизайна html-сетки необходимы именно из-за гибкости и универсальности разметки – так имея один html-код и меняя только CSS файл можно легко реализовывать отличную совместимость с разными экранами устройств.
Появилось множество популярных CSS-фреймворков, самый удобный, функциональный и часто используемый Bootstrap– знаменитый многофункциональный HTML/CSS-фреймворк от Twitter.
Для отзывчивого веб-дизайна одним из главных моментов является наличие гибких изображений на страницах, которые меняют свои размеры в зависимости от просматриваемого устройства.
Реализовать гибкость изображений очень просто с помощью CSS3:
img {
max-width: 100%;
height: auto;
}
Чтобы гибкие изображения работали в IE8 нужно добавить свойство width:auto. Поэтому специально для IE8 можно применить IE-хак:
@media screen {
img {
width: auto; /* для ie 8 */}
}
img, embed, object, video { max-width: 100%; }
CSS3 медиазапросы – это новые возможности которые нам дает отзывчивый веб-дизайн. С помощью этих CSS медиазапросов можно указывать браузерам какие CSS классы применять для того или иного экранного разрешения. Кроме того, медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы.
IE8 и более старые версти не поддерживают медизапросы, потому следует добавить следуюющий HTML-код:
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
Примеры CSS медиазапросов:
% используется для того чтобы сделать элементы резиновыми.
/*для экранов 800px и меньше*/
@media screen and (max-width: 800px) {
#page {width: 95%;}
#content {width: 70%;}
#sidebar {width: 25%;}
}
/*дляэкранов 600px именьше*/
@media screen and (max-width: 600px) {
#page {width: auto; float:none;}
#sidebar {width: auto; float:none;}
}
/*для экранов 480 пкс и меньше*/
@media screen and (max-width: 480px) {
#header{height: auto;}
#sidebar {display:none;}
}
