CSS - Медиа запросы (media queries)
Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.
Что такое медиа запросы
Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.
Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

respond.js
:
<!-- Respond.js для IE8 (media queries) --> <!-- ПРЕДУПРЕЖДЕНИЕ: Respond.js не будет работать при просмотре страницы через file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может "приспосабливаться" (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье "Что такое адаптивная разметка".
Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье "Знакомство с meta viewport".
Подключение метатега viewport
к странице в большинстве случаях осуществляется так:
<meta name="viewport" content="width=device-width, initial-scale=1">
Синтаксис медиа запросов
Для создания медиа запросов используется следующий синтаксис:
@media условие { /* стили (они будут выполняться, если устройство соответствует указанному условию) }
Основные типы устройств:
all
- все устройства (по умолчанию).print
- принтеры и режим предварительного просмотра страницы перед печатью.screen
- устройства с дисплеями.
Логические операторы:
and
- требует обязательного выполнения всех указанных условий.
Например:@media screen and (min-width: 1200px) and (orientation: landscape) { /* Стили CSS ... */ }
Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.,
(запятая) - требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.@media (min-width: 544px), (orientation: landscape) { /* Стили CSS ... */ }
Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.not
- предназначен для отрицания указанного условия. Имеет по отношению к операторуand
меньший приоритет, т.е. операторnot
всегда выполняется послеand
.@media not screen and (orientation: portrait), (min-width: 992px) { /* Стили CSS ... */ }
Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
Т.е. запрос в вышеприведённом примере будет обрабатываться так:@media not (screen and (orientation: portrait)), (min-width: 992px) { /* Стили CSS ... */ }
Медиа функции
Для составления условия в @media можно использовать следующие фукнции:
width
- указывает требования к ширине области просмотра устройства (браузера)./* применить стили CSS только для устройств с шириной области просмотра, равной 320px */ @media (width: 320px) { /* Стили CSS ... */ }
min-width
- задаёт минимальную ширину области viewport вpx
,em
или других единицах./* для устройств (браузеров), которые предоставляют для страницы минимальную ширину области просмотра, равную 544 пикселя */ @media (min-width: 544px) { /* Стили CSS ... */ }
max-width
- указывает на то, какой должна быть максимальная рабочая область устройства (браузера)./* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */ @media (max-width: 1199px) { /* Стили CSS ... */ }
height
,min-height
иmax-height
- задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport./* стили, которые будут применены к элементам страницы в том случае, если viewport браузера будет больше 720px в высоту */ @media (min-height: 720px) { /* Стили CSS ... */ }
orientation
- функция, которая проверяет то, в каком режиме (portrait
илиlandscape
) отображается страница.
Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:/* landscape (альбомный) - это режим, в котором наоборот ширина viewport больше её высоты */ @media (orientation: landscape) { #background-image { background: url(image1.png) no-repeat; } } /* portrait (портретный) - это режим, в котором высота viewport больше ширины */ @media (orientation: portrait) { #background-image { background: url(image2.png) no-repeat; } }
aspect-ratio
(min-aspect-ratio
,max-aspect-ratio
) - позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения./* для дисплеев с соотношением сторон 16/9 */ @media screen and (device-aspect-ratio: 16/9) { /* Стили CSS ... */ } /* для дисплеев с соотношением сторон 1336/768 */ @media screen and (device-aspect-ratio: 1336/768) { /* Стили CSS ... */ }
resolution
(min-resolution
,max-resolution
) - указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины:dpi
(количество точек на дюйм),dpcm
(количество точек на сантиметр),dppx
(количество точек на пиксель)./* для экранов, имеющих высокую плотность пикселей (т.е. для таких, у которых отношение аппаратных пикселей к CSS не менее 2) */ @media screen and (min-resolution: 2dppx) { /* Стили CSS ... */ } /* при печати с разрешением свыше 300 точек на дюйм */ @media print and (min-resolution: 300dpi) { /* Стили CSS ... */ }
Использование медиа-запросов при подключении файлов CSS
Медиа запросы также можно применять в качестве значения атрибута media
элемента link
. Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.
<!-- Стили xs-styles.css будут подсоединены к странице только на устройствах c шириной меньше 543 пикселей (включительно) --> <link rel="stylesheet" media="screen and (max-width: 543px)" href="styles-xs.css">
Кроме этого медиа запросы можно также использовать в правиле @import
, которое предназначено для импортирования стилей из других файлов CSS в текущий.
/* импортирование стилей из файла styles-xs.css в текущий файл стилей только для устройств, которые предоставляют веб-странице viewport, имеющий ширину 543 пикселя или меньше. */ @import url(styles-xs.css) (max-width: 543px);
Медиа запросы для Bootstrap 3
Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):
/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) - для ширины viewport <768px */ /* Устроства с маленьким экраном (планшеты, 768px и выше) */ @media (min-width: 768px) { /* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */ } /* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */ @media (min-width: 992px) { /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */ } /* Устройства с большим экраном (компьютеры, 1200px и выше) */ @media (min-width: 1200px) { /* Стили для устройств с шириной viewport >1200px */ }
Вышеприведённые запросы необходимо использовать только в указанном порядке.
Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width
. Это заставит их работать только в указанном диапазоне.
@media (max-width: 767px) { /* стили для xs-устройств */ } @media (min-width: 768px) and (max-width: 991px) { /* стили для sm-устройств */ } @media (min-width: 991px) and (max-width: 1199px) { /* стили для md-устройств */ } @media (min-width: 1200px) { /* стили для lg-устройств */ }
Медиа запросы для Bootstrap 4
Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):
/* xs - устройства (до 576px) */ /* CSS для ширины, которая меньше 575px (включительно) */ /* sm-устройства (больше или равно 576px) */ @media (min-width: 576px) { /* CSS для: 576px <= ширины <= 767px */ } /* md-устройства (больше или равно 768px) */ @media (min-width: 768px) { /* CSS для: 768px <= ширины <= 991px */ } /* lg-устройства (больше или равно 992px) */ @media (min-width: 992px) { /* CSS для: 992px <= ширины <= 1119px */ } /* xl-устройства (больше или равно 1200px) */ @media (min-width: 1200px) { /* CSS для: ширины >= 1200px */ }
Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):
/* xl-размер (>=1200px) */ /* CSS для >=1200px */ /* lg-размер (<=1199px) */ @media (max-width: 1199px) { /* CSS для ширины от 992px до 1199px */ } /* md-размер (<=991px) */ @media (max-width: 991px) { /* CSS для ширины от 768px до 991px */ } /* sm-размер (<=768px) */ @media (max-width: 767px) { /* CSS для ширины от 576px до 767px */ } /* xs-размер (<=575px) */ @media (max-width: 575px) { /* CSS для ширины до 575px (включительно) */ }
Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:
/* xs (<=543px) */ @media (max-width: 575px) { ... } /* sm (>=576 и <=767) */ @media (min-width: 576px) and (max-width: 767px) { ... } /* md (>=768 и <=991) */ @media (min-width: 768px) and (max-width: 991px) { ... } /* lg (>=992 и <=1199) */ @media (min-width: 992px) and (max-width: 1199px) { ... } /* xl (>=1200) */ @media (min-width: 1200px) { ... }
Код JavaScript, учитывающий параметры устройств
Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia
объекта window
.
Осуществляется это следующим образом:
// например, проверим, соответствует ли указанный медиа запрос (screen and (max-width: 543px)) устройству // результат проверки можно получить с помощью свойства matches (true или false) if (window.matchMedia('screen and (max-width: 543px)').matches) { // ... действия, если устройство отвечает медиа запросу } else { // ... действия, если устройство не соответствует значениям медиа запроса }
Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).
Метод matchMedia
не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq
библиотеки Modernizr.

if (Modernizr.mq('(max-width: 767px)')) { // ... действия, если устройство соответсвуют указанному медиа условию } else { // ... действия, если устройство не отвечает заданному медиа условию }
Я создал 3 варианта расположения блоков (в коде html). Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript?
itchief.ru/assets/uploadify/5/9/c/59c63aef28c88df1635473555b1d5c3e.png
Спасибо!
вот этот код даёт только один блок слева при 1000рх, как получить второй?
Вот видео :https://yadi.sk/i/iU9sBd6YiSWMYA (20 секнуд)и если не. трудно не могли бы вы телеграмм оставить?
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье.
Такой вопрос, применил в js
if (window.matchMedia('screen and (max-width: 543px)').matches) {}
Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер
Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?
Так, конечно, у вас код сработает один раз.
В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.
Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)
Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).
Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.
Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.
И т.д.
После неё сработают следующие стили, т.к. они не заключены в @media (min-width: 1200px) { … }. В этом случае они переопределят те что были, т.к. они идут после них.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования "@media (min-width)".
Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в "@media (min-width)".
При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без "@media (min-width)", потом, например, с использованием правила "@media (min-width: 576px)", далее с "@media (min-width: 768px)" и т.д.
Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.
P.S: нет ли у вас на сайте видео примера такой верстки?
/* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */
размер экрана iphone se 1136x640 то есть по идее на портерной ориентации он должен сработать, а на альбомной — нет, но по факту получается что он срабатывает и в том и другом случае.
Если изменять окно браузера то все работает корректно, на телефонах по другому пиксели считаются?
Например, для экранов, имеющих минимальную ширину 1300px:
Начал разбираться с медиа запросами почитал примеры на хабре попробовал ради эксперимента, и сразу же столкнулся с вопросом.
Ниже код: Просматриваем в Chrome.
По F12 открываем консоль, включаем просмотр на разных устройствах и начинаем с самого начала. BlackBerry Z30 с размерами 360 на 640 — прописали медиазапросы, все входит, при обеих ориентациях, — все отлично.
Переходим к следующему в списке BlackBerry PlayBook с размерами 600 на 1024, — прописали медиазапросы, подогнали, все отлично, возвращаемся на посмотреть, что произошло с BlackBerry Z30 — все уплыло.
А там у Хрома еще очень длинный список…
Подскажите, как в таких случаях бороться? Скорее даже вопрос во внятном пояснении принципов.
При этом правила необходимо располагать в следующем порядке:
При этом не обязательно их ограничивать с помощью max-width. Т.е. если у вас в браузере CSS ширина рабочей области равно, например 600px. То будут применены CSS-свойства с условием min-width: 576px, т.к. они расположены после тех, которые предназначены для устройств до 576px. А стили для устройств >=768px применены не будут, т.к. текущая ширина устройства не отвечает этому условию.
То-есть порядок прописания контрольных точек критичен?
Т.е. нет смысла делать так:
Т.е. если, например, устройство имеет ширину 375px, то в этом случае какая будет ширина? Другими словами, CSS правило из 1 media запроса никогда применится к блоку с классом main.