Шаблоны media-queries для адаптации макетов для мобильных устройств

Так как я коммерчески занимаюсь разработкой сайтов, то недавно ко мне обратились с популярной сегодня просьбой адаптировать текущую верстку сайта ml-art.ru под мобильные устройства. Так как ранее я почти все шаблоны сайтов делал статическими, то в этот раз встал вопрос, а что делать, когда нужен 1 шаблон, который будет не одинаково, но достаточно удобно, просматриваться на разных устройствах (мобильные телефоны, планшеты, и так далее)?

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

https://github.com/web-standards-ru/dictionary/issues/84
https://www.responsys.com/blogs/nsm/cross-channel-marketing/difference-responsive-adaptive-web-design/
http://alistapart.com/article/responsive-web-design

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

Несколько дней практики, дали мне понять, что в основе адаптивной верстки лежат следующие, достаточно простые и старые, принципы. Старые потому, что такое понятие как резиновая «верстка», было введено еще самим Атремием Лебедевым и заключалось в размещении всей верстки в таблицу, а ячейкам таблицы задавались процентные значения. Принцип резиновости от части сохранился и в адаптивном дизайне, но реализуется несколько иначе.

1. Во-первых, проектирование и верстка начинается от меньшего к большему. Этот принцип называется Mobile First, то есть проектируя макеты, сначала рассматривают то, как сайт будет выглядеть на мобильных устройствах с минимальным разрешением, затем на смартфонах, затем на планшетах, и уже после на desktop. По сути это правильно, так как в противном случае нам пришлось бы отрезать лишнее, но при подходе Mobile First мы будем наоборот наращивать нужное. Это правильно.

2. Во-вторых, макет строится на основе сетки и является гибким. То есть в сравнении с резиновой, табличной версткой тут уже естественно нет никаких таблиц, а есть лишь grid-based layout или fluid grid, которая совместно с использованием % и em для значений css свойств font-size, line-height, height и width, а также с использованием media-queries для определения разрешений устройств, может содержать различное количество колонок. За счет этого и достигается динамика. То есть вы как бы говорите браузеру с какого устройства и с каким разрешением зашли на сайт, и подкладываете в зависимости от разрешения определенное количество колонок, или передаете определенное значение float: left или float: right или clear: both в зависимости от ситуации, а также масштабируете размеры шрифта заголовков и абзацев текста.

3. В третьих, изображения перестают быть статическими, и им задается динамическое значение ширины в пределах блока через css. То есть используется технология гибких изображений, flexible images, вы достигаете масштабирования изображений на 100% в пределах контейнера. Делается это через задание следующих css правил

div {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
    display: block;
}
div img {
    width: 100%;
    height: auto;
    display: block;
}

4. В четвертых, динамика шаблонов в зависимости от устройств достигается благодаря появившемуся в CSS 3.0 свойству media-queries на основании которого вычисляется минимальное или максимальное разрешение экрана или разрешение устройства, и отдается в это устройство особый файл стилей.

Конечно разрешения можно указывать индивидуально, но как правило, используют в основном типовые значения.

Стандартный шаблон media-queries выглядит примерно так:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

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