Стартовая страницаНовости

Чуть подробнее о CSS3 медиа запросах

Медиа запросы представляют собой логические выражения, которые могут быть истинными или ложными. Когда html-документ рендерится, браузер определяет тип носителя информации. Медиа запрос будет истинным, если указанный тип носителя соответствует типу носителя, на котором запущен браузер. В этом случае к указанным в правиле @media селекторам применятся соответствующие css-стили.

1. Структура медиазапроса

Медиа запрос (правило @media) состоит типа носителя и ноль или более выражений для проверки характеристик устройства

@media screen and (max-width: 600px) {
body {font-size: 80%;}
}

Стили данного медиазапроса, заключенные в фигурные скобки, будут применяться в тех случаях, когда ширина области просмотра не превышает 600px. Если ширина будет больше, то браузер игнорирует стили данного медиазапроса.

Правила @media всегда прописываются в конце файла css-стилей.

2. Логические операторы

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

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

@media screen and (max-width: 600px) {
/* css-стили */;
}

Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px.

@media (min-width: 600px) and (max-width: 800px)
{
   /* css-стили */
}


@media (min-width: 600px) and (max-width: 800px)
{
   /* css-стили */
}

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) {...} равнозначно правилу @media (max-width: 600px) {...}.

2.2. Оператор 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)?

2.3. Оператор only

Оператор only позволяет подключать стили для браузеров, которые не поддерживают медиа запросы, например:

@media only screen and (color) {
/* css-стили */;
}?

2.4. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or.

@media screen, projection {
/* css-стили */;
}?

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

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

Таблица 1. Тип носителя

Значение Описание
all Подходит для всех типов устройств.
print Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
screen Предназначен в первую очередь для экранов цветных компьютерных мониторов.
speech Предназначен для синтезаторов речи.

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural, braille, embossed, projection, tty, tv и handheld, но они приняты устаревшими в Media Queries 4 и не будут использоваться.

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.

5. На какие размеры экрана нужно ориентироваться

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

Чтобы адаптировать дизайн сайта под разные устройства, необходимо задать разные стили для разных разрешений экранов, используя следующие контрольные точки (не обязательно все):

/* 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.

 

0
Пока еще нет ни одного комментария. 

Дима Кононов © - разработка сайтов "под ключ".

Персональный сайт Дмитрия Кононова программиста, музыканта и просто хорошего парня.
Функционирует с 2015 года. Версия 3.0
Разработка и дизайн: Кононов Дмитрий (R)
Сейчас зарегистрированных посетителей на сайте: 0 Посмотреть подробнее...
Новостная лента RSS 2.0
Фото c сайта Закрыть окно
Закрыть