Главная » Сниппеты » CSS Медиа-запросы для различных пользовательских устройств

CSS Медиа-запросы для различных пользовательских устройств

CSS Медиа-запросы для различных пользовательских устройств

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

Вот несколько распространенных медиа-запросов, которые могут оказаться полезными при проектировании динамичного сайта с адаптивным дизайном:

/* Смартфоны (портретный и альбомный режимы) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Сюда добавляем стили*/
}
 
/* Смартфоны (альбомный режим) ----------- */
@media only screen
and (min-width : 321px) {
/* Сюда добавляем стили*/
}
 
/* Смартфоны (портретный режим) ----------- */
@media only screen
and (max-width : 320px) {
/* Сюда добавляем стили*/
}
 
/* iPad (портретный и альбомный режимы) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Сюда добавляем стили*/
}
 
/* iPad (альбомный режим) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Сюда добавляем стили*/
}
 
/* iPad (портретный режим) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Сюда добавляем стили*/
}
 
/* Настольные компьютеры и ноутбуки ----------- */
@media only screen
and (min-width : 1224px) {
/* Сюда добавляем стили*/
}
 
/* Большие экраны ----------- */
@media only screen
and (min-width : 1824px) {
/* Сюда добавляем стили*/
}
 
/* iPhone 5 (портретный и альбомный режимы)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Сюда добавляем стили*/
}
 
/* iPhone 5 (альбомный режим)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Сюда добавляем стили*/
}
 
/* iPhone 5 (портретный режим)----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Сюда добавляем стили*/
}

Как мы знаем, Apple является пионером в области разработки и выпуска на мировой рынок смартфонов, и планшетных продуктов потребительского класса, так что большинство медиа-запросов ориентированы именно на размеры экранов этих устройств. Так же добавил медиа-запрос для больших экранов мониторов персональных компьютеров.
Большинство современных браузеров (включая браузеры для смартфонов) поддерживает CSS-медиазапросы, а вот в Internet Explorer 8 поддержка медиа-запросов по-прежнему отсутствует, для этого тормоза прогресса применяют всевозможные костыли и примочки вроде Respond.js, но это уже совсем другая история.

С уважением, Андрей

Буду признателен, если поделитесь ссылкой на запись с друзьями в своих соц. сетях

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru