Мобильный адаптивный дизайн

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

Исходя из статистики рассмотрим 5 самым популярных разрешений экранов телефонов.

И 5 популярных разрешений планшетов.

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

@media screen and (max-device-width: 480px) and (orientation: portrait) {
#background  {
width: 480px;
background:url(../img/bg.jpg);
}
}

Мы также можем использовать CSS-правило @import для условной загрузки таблиц стилей в нашу имеющуюся таблицу стилей. Например, приведенный далее код импортирует таблицу стилей с именем phone.css при условии, что определенное устройство будет иметь экран, а также располагать областью просмотра с макси- мальной шириной 480 пикселов:

@import url("phone.css") screen and (max-width:480px);

При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов устройств (device-width).

• width — ширина области просмотра.
• height — высота области просмотра.
• device-width — ширина поверхности, на которой происходит визуализация (для нас это ширина экрана устройства).
• device-height — высота поверхности, на которой происходит визуализация (для нас это высота экрана устройства).
• orientation — ориентация экрана устройства (книжная или альбомная).
• aspect-ratio — соотношение ширины и высоты в зависимости от ширины и вы- соты области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как aspect-ratio: 16/9.
• device-aspect-ratio — аналогична aspect-ratio, однако базируется на шири- не и высоте поверхности устройства, на которой происходит визуализация, а не на ширине и высоте области просмотра.

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

@import url("phone.css") screen and (min-width:560px) and (max-width:1136px);

Здесь минимум (min) и максимум (max) были установлены в медиазапросе width для задания диапазона. Файл phone.css будет импортироваться, только когда речь будет идти об устройствах с экраном с минимальной шириной области просмотра 560 пикселов и максимальной шириной области просмотра 1136 пикселов.

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

iPhone < 5:

@media screen and (device-aspect-ratio: 2/3) { ваши стили }

iPhone 5:

@media screen and (device-aspect-ratio: 40/71) { ваши стили }

iPad:

@media screen and (device-aspect-ratio: 3/4) { ваши стили }