Logo: Uran web studio
Сделать сайт в Украине

Отзывчивый веб-дизайн

Отзывчивый веб-дизайн – это технология верстки дизайна макета сайта, которая позволяет корректно отображать сайт на всех устройствах различных разрешений и форматов, имеющих подключение к интернет. Например: мониторы, планшеты, ноутбуки, смартфоны, телевизоры.

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

Впервые понятие отзывчивого веб-дизайна (англ. 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">

Теперь наша страница готова для того, чтобы адаптироваться к различным размерам экранов.

В своей книге Итан Маркотт описал три принципа отзывчивого дизайна:

  • Гибкий макет на основе сетки (flexible, gridbased layout)
  • Гибкие изображения (flexible images)
  • Медиазапросы (CSS3 media query)

Гибкий макет на основе сетки

Для отзывчивого веб-дизайна 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 */}
}

Правило max -width: 100% можно применять и к большинству элементов с фиксированной шириной, таким как видео– и другие медиа-файлы. Фактически мы можем добавить в селектор еще и другие медиаэлементы:
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;}
}


Теги: HTML верстка
2013-05-19

И еще полезные примеры JavaScript

Удалить елементы на странице по имени класса

Почему рассылки попадают в спам

вверх