↑ HTML верстка | ||||
Урок - Адаптивная верстка | ||||
Текущий урок - первый. |
Следующий урок → Урок - Генератор модульной сетки gridpak.com.
|
Адаптивный верстка - верстка предусматривающая отображение сайта на различных устройствах, таких как мониторы, планшеты, мобильные телефоны, телевизоры, экраны тренажеров, глазное яблоко и другие пока не придуманные устройства.
Адаптивная верстка подразумевает под собой, что страница сайта должна реагировать на условия в которых просматривается, т.е. учитывать размеры экрана, устройство, программное обеспечение.
Для достижения этой цели используются следующие идеи и принципы:
- Резиновая сетка (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.
* Указывайте ширину всех контейнеров и блоков в %(процентах).
Фреймворки для создания адаптивной верстки.
Примеры сайтов с адаптивной версткой
Дополнительные инструменты.
Gridpak - веб-инструмент, генератор адаптивной верстки.
A Fluid grid calculator - позволяет создавать резиновые сетки.
Fluid Baseline Grid - создает резиновую сетку с базовой линией.
↑ HTML верстка | ||||
Урок - Адаптивная верстка | ||||
Текущий урок - первый. |
Следующий урок → Урок - Генератор модульной сетки gridpak.com.
|