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

Ниже приведены полезные приемы, которые пригодятся вам при проектировании адаптивного (или, что более верно, отзывчивого) сайта. В статье затронуты следующие важные нюансы полезные для адаптивного сайта: медиазапросы (характеристики устройств), гибкие изображения, поведение полей и отступов, дополнительно говорится о высоте, описывается как использовать медиазапросы в браузерах от IE(6-8), приведено краткое описание использование мета-тега viewport.

Медиазапросы и характеристики устройств

• Width и height определяют область просмотра или окна браузера, в тоже время device-width и device-height определяют размеры экрана.
• Max-width используется для тех браузеров, окон или устройств разрешение которых не превышает указанный параметр.
• Min-width – ширина просмотра должна быть не меньше указанной.

Характеристики устройств для медиазапросов

Примеры использования медиазапросов

CSS

@media screen and (max-width: 768px), screen and (min-width: 1200px) {
    .....
}

@media screen and (max-width: 768px) {
    .....
}

@media screen and (max-width: 520px) {
    .....
}

@media screen and (max-width: 480px) {
    .....
}

@media screen and (max-width: 360px) {
    .....
}

 @media screen and (min-width: 768px) {
    .....
}

@media screen and (min-width: 1200px) {
    .....
}

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

Все достаточно просто: при max-width: 100% изображения не выйдет за пределы ширины элемента-родителя.

Адаптивное фоновое изображения для двух колонок Резиновое фоновое изображения для двух масштабируемых колонок, CSS

Поля (margin) и отступы (padding)

И поля (margin) и отступы (padding) элемента, если вы задаете их в процентах, рассчитываются относительно ширины элемента контейнера.

Высота

Высота элемента, заданная в процентах, рассчитывается относительно высоты элемента-родителя (кроме этого, если высота элемента-предка, от которого идет расчет, равна auto, то и высота самого элемента станет равной auto независимо от указанных процентов).
Как вы помните, для высоты значение по умолчанию – auto.

Поддержка медиазапросов в браузере IE8 и ниже

Для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript. Ссылка на github: Respond

Ссылку на respond.js поставьте после всех css файлов.

Мета-тег viewport

width=device-width

Назначив мета-тегу viewport значение device-width, мы говорим браузеру, что ширина области просмотра равняется ширине этого устройства, а не стандартной ширине в 980px, как он может предполагать по умолчанию.
Или другими словами: по умолчанию, Safari на iPhone отобразит вашу страницу так же как браузер на большом компьютерном экране шириной 980 пикселов. Затем он отмасштабирует содержимое так, чтобы оно умещалось на маленьком экране.

Следующий вариант определения области просмотра определяет ширину страницы и задает начальный масштаб:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML

<meta name="viewport" content="width=device-width" />

Этот атрибут говорит браузеру, что в качестве ширины окна просмотра надо использовать ширину экрана, а не 980px, заданных по умолчанию.

Основные параметры для мета-тега viewport