Урок - Адаптивная верстка

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

Адаптивная верстка подразумевает под собой, что страница сайта должна реагировать на условия в которых просматривается, т.е. учитывать размеры экрана, устройство, программное обеспечение.

Для достижения этой цели используются следующие идеи и принципы:

• Резиновая сетка (fluid grid).
• Гибкие изображения.
• Медиа запросы (media queries)
• Сначала малыши (Mobile first)

Резиновая сетка (fluid grid).

Во первых...

Сетка (в дизайне) - разделение макета на вертикальные и/или горизонтальные направляющие.

Резиновая сетка - разделение HTML-страницы на вертикальные (реже и горизонтальные) направляющие, меняющие свои параметры (ширина, отступы) в зависимости от параметров экрана.

Расчет проізводітся следуюўім образом:

ШиринаЭлемента / ШиринаРодителя = РезультатВПроцентах

Например для макета:

1000px и двумя колонками 200px и 600px.

.leftColumn {
    float: left;
    width: 20%; /* 200 / 1000 = 0.20 */
}
.contentColumn {
    float: right;
    width: 80%; /* 800 / 1000 = 0.80 */
}

Разделение колонки contentColumn на 2 колонки 500px и 300px:

.innerColumn {
    float: left;
    width: 62.5%; /* 500 / 800 = 0.625 */
}
.rightColumn {
    float: right;
    width: 37.5%; /* 300 / 800 = 0.375 */
}

Гибкие изображения.

Вывод изображений на различных экранах, при использовании адаптивной верстки требует производить дополнительные манипуляции. С одной стороны стремление минимизировать время разработки сайта, с другой стороны удобство пользования приводит к следующей задаче:

Изображения на различных устройствах должны быть различных размеров.

Решается задача несколькими способами:

• Масштабирование - жесткое указание размеров в зависимости от устройства.
• Ограничение области видимости изображения с помощью CSS-параметров width и overflow.
• Ограничение ширины с помощь CSS-параметра max-width.

рассмотрим последний вариант - Ограничение ширины с помощь CSS-параметра max-width:

Идея заключается в особенной работе свойства max-width со значением 100%. Изображение никогда не выйдет за границе родительского элемента, если параметр max-width установлен в 100%:

img {
    max-width: 100%;
}

Медиа запросы (media queries).

Медиа запросы (media queries) основываются на CSS-параметре @media, с помощью которого можно группировать CSS-правила для различных устройств.

Рассмотрім для начала пример:

/*
	общие CSS-правила
*/

@media only screen and (min-width: 360px) {
	/*
		Здесь указываюется CSS-правила для устройств с шириной экрана от 360 пикселей.
	*/
}

@media only screen and (min-width: 640px) {
	/*
		Здесь указываюется CSS-правила для устройств с шириной экрана от 640 пикселей.
	*/
}   

 Для Internet Explorer есть Respond.js.

Сначала малыши (Mobile first).

Принцип заключается в том, что в первую очередь верстка делается для устройства с меньшими возвожносьтями, а после используется Медиа запросы (media queries) для дополнительных возможностей.

В этом случае "слабые" браузеры получат самую простую верстку, а более продвинутые покажут страницу с учетом Медиа запросов (media queries).

Полезные советы при адаптивной верстке.

* Размеры шрифта указывайте в % (процентах) или em.

* Указывайте ширину всех контейнеров и блоков в %(процентах).

Фреймворки для создания адаптивной верстки.

• Gridless
• Less Framework
• Elasticss
• CSS Tricks
• 1Kb Grid

Примеры сайтов с адаптивной версткой

• laufbild-werkstatt.de
• yiibu.com
• Philip Meissner Design
• alistapart.com
• Do Lectures

Дополнительные инструменты.

Gridpak - веб-инструмент, генератор адаптивной верстки.

A Fluid grid calculator - позволяет создавать резиновые сетки.

Fluid Baseline Grid - создает резиновую сетку с базовой линией.