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, но это уже совсем другая история.
С уважением, Андрей
Буду признателен, если поделитесь ссылкой на запись с друзьями в своих соц. сетях
Всего комментариев: 0