Создание медиа запросов в CSS3
Содержание:
1. Структура медиазапроса @media
2. Логические операторы
3. Тип носителя
4. Характеристики носителя
5. На какие размеры экрана устройств нужно ориентироваться
Структура медиазапроса
Медиазапрос состоит из правила @media, за которым следует указание типа носителя и по крайней мере одна проверяемая характеристика носителя, условие медиа запроса:
| @media screen and (max-width: 600px) { body {font-size: 80%;} } |
Стили данного медиазапроса, заключенные в фигурные скобки, будут применяться в тех случаях, когда ширина области просмотра не превышает 600px. Если ширина будет больше, то браузер игнорирует стили данного медиазапроса.
Правила @media всегда прописываются в конце файла css-стилей.
Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
Оператор and
Оператор and связывает друг с другом разные условия:
| @media screen and (max-width: 600px) { /* css-стили */; } |
Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px.
| @media (min-width: 600px) and (max-width: 800px) { /* css-стили */; } |
Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.
Правило @media all and (max-width: 600px) {...} равнозначно правилу@media (max-width: 600px) {...}.
Оператор not
Оператор not позволяет сработать медиа запросу в противоположном случае. Ключевое слово not добавляется в начало медиа запроса и применяется ко всему запросу целиком, т.е. запрос
| @media not all and (monochrome) {...} |
будет эквивалентен запросу
| @media not (all and (monochrome)) {...} |
Если медиа запрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос
| @media not screen and (color), print and (color) |
будет эквивалентен запросу
| @media (not (screen and (color))), print and (color) |
Оператор only
Оператор only позволяет подключать стили для браузеров, которые не поддерживают медиа запросы, например:
| @media only screen and (color) { /* css-стили */; } |
Оператор запятая
Оператор запятая работает по аналогии с логическим оператором or.
| @media screen, projection { /* css-стили */; } |
В данном случае css-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
| ТАБЛИЦА 1. ТИП НОСИТЕЛЯ | |
| Значение | Описание |
| all | Подходит для всех типов устройств. |
| Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. | |
| screen | Предназначен в первую очередь для экранов цветных компьютерных мониторов. |
| speech | Предназначен для синтезаторов речи. |
CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural, braille, embossed, projection, tty, tv и handheld, но они приняты устаревшими в Media Queries 4 и не будут использоваться.
Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
| ТАБЛИЦА 2. ХАРАКТЕРИСТИКИ НОСИТЕЛЯ | |
| Параметр | Описание |
| width | Проверяет ширину области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (width: 800px). Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width— ширина области просмотра меньше значения, указанного в запросе. |
| height | Проверяет высоту области просмотра. Значения задаются в единицах длины, px, em и т.д., например, (height: 500px). Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе. |
| aspect-ratio | Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9). min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра. |
| orientation | Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape). |
| resolution | Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например,(resolution: 300dpi). min-resolution проверяет минимальное разрешение экрана,max-resolution — максимальное. |
| color | Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4)означает, что экран конкретного устройства должен иметь 4-битную глубину цвета. min-color проверяет минимальное количество бит, max-color— максимальное количество бит. |
| color-index | Проверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256). min-color-index проверяет минимальное количество записей,max-color-index — максимальное количество записей. |
| monochrome | Проверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8). min-monochrome проверяет минимальное количество битов,max-monochrome — максимальное количество битов. |
| -webkit-device-pixel-ratio | Задаёт количество физических пикселей устройства на каждый css-пиксель. |
device-width, device-height, device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.
На какие размеры экрана устройств нужно ориентироваться
При составлении медиа запросов нужно ориентироваться на так называемые переломные точки дизайна, т.е. такие размеры окна браузера, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
Чтобы адаптировать дизайн сайта под разные устройства, необходимо задать разные стили для разных разрешений экранов, используя следующие контрольные точки (не обязательно все):
| /* Smartphones (вертикальная и горизонтальная ориентация) ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) { /* стили */ } /* Smartphones (горизонтальная) ----------- */ @media only screen and (min-width: 321px) { /* стили */ } /* Smartphones (вертикальная) ----------- */ @media only screen and (max-width: 320px) { /* стили */ } /* iPads (вертикальная и горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) { /* стили */ } /* iPads (горизонтальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { /* стили */ } /* iPads (вертикальная) ----------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { /* стили */ } /* iPad 3**********/ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* стили */ } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* стили */ } /* Настольные компьютеры и ноутбуки ----------- */ @media only screen and (min-width: 1224px) { /* стили */ } /* Большие экраны ----------- */ @media only screen and (min-width: 1824px) { /* стили */ } /* iPhone 4 ----------- */ @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) { /* стили */ } @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) { /* стили */ } /* iPhone 5 ----------- */ @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ /* стили */ } @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ /* стили */ } /* iPhone 6 ----------- */ @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ /* стили */ } @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ /* стили */ } /* iPhone 6+ ----------- */ @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ /* стили */ } @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ /* стили */ } /* Samsung Galaxy S3 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ /* стили */ } @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ /* стили */ } /* Samsung Galaxy S4 ----------- */ @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){ /* стили */ } @media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){ /* стили */ } /* Samsung Galaxy S5 ----------- */ @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){ /* стили */ } @media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){ /* стили */ } |
Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.