Как работают медиа запросы css

25.11.2023

Медиа-запросы

Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.

Синтаксис

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

Табл. 1. Типы носителей и их описание

Тип	Описание
all	Все типы. Это значение используется по умолчанию.
braille	Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed	Принтеры, использующие для печати систему Брайля.
handheld	Смартфоны и аналогичные им аппараты.
print	Принтеры и другие печатающие устройства.
projection	Проекторы.
screen	Экран монитора.
speech	Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty	Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv	Телевизоры.

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

@media all and (color)

not

Логическое НЕ. Указывается для отрицания условия.

Пример. Стиль для всех устройств кроме смартфонов

@media all and (not handheld)

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

@media not all and (color)

следует понимать как

@media not (all and (color))

@media (not all) and (color)

only

Применяется для старых браузеров, которые не поддерживают медиа-запросы.

Пример. Стиль для новых браузеров

@media only all and (not handheld)

В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.

Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.

@media all and (orientation: landscape), all and (min-width: 480px)

Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.

Медиа-функции

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

Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселов.

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).

color (min-color, max-color)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) < /* Для цветных экранов */ body < background: #fc0; >> @media screen and (min-color:3) < /* Минимум 512 цветов */ body < background: #ccc; >>

color-index (min-color-index, max-color-index)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.

Пример 2. Цветной дисплей

@media all and (min-color-index: 256)

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@media screen and (min-device-aspect-ratio: 16/9)

device-height (min-device-height, max-device-height)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную высоту экрана устройства или печатной страницы.

device-width (min-device-width, max-device-width)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5 CSS3 IE Cr Op Sa Fx

    Ширина макета    Диабаз, формируя аномальные геохимические ряды, сменяет известняк, образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.

grid

Тип носителя: all
Значение: нет

Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5 CSS3 IE Cr Op Sa Fx

    Стиль для бабушкофона   Привет! Как дела? Как сажа бела?

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

@media print and (monochrome) < body < font-family: Times, 'Times New Roman', serif; > 
h1, h2, p < color: black; >> @media print and (color) < body < font-family: Arial, Verdana, sans-serif; > 
h1, h2, p < color: #556b2f; >>

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@media screen and (orientation: landscape) < #logo < background: url(logo1.png) no-repeat; >> @media screen and (orientation: portrait) < #logo < background: url(logo2.png) no-repeat; >>

resolution (min-resolution, max-resolution)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.

Пример 8. Разрешение принтера

@media print and (min-resolution: 300dpi)

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5 CSS3 IE Cr Op Sa Fx

    Ширина страницы   Пока магма остается в камере, мусковит сингонально поднимает шток, в то время как значения максимумов изменяются в широких пределах.

Что такое медиа запросы CSS и для чего они нужны

Статья также доступна на украинском (перейти к просмотру).

Оглавление:

Когда целесообразно их применение
Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS
Как записать медиа запрос в общем CSS файле
Рассмотрим синтаксис написания медиа запросов
Примеры написания медиа запросов
Выводы

В современных реалиях пользователи посещают сайты с самых различных устройств: стационарные компьютеры, планшеты, смартфоны . Причем большинство уже заходит со смартфонов.

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

Также необходимо соблюдать нормы по Core Web Vitals.

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

Медиа запросы (media queries) – это правила CSS позволяющие управлять стилями элементов в зависимости от значений технических параметров (высота и ширина браузера, разрешение страницы, типа устройства, его ориентации, плотности пикселей и т.д.). Впервые начали применяться в CSS 3.

Когда целесообразно их применение

Страница сверстана в несколько колонок

Трех колоночный дизайн достаточно часто встречается в HTML верстке.

Однако, если на широком мониторе, компа или ноутбука, он будет смотреться отлично, со смартфона это будет очень неудобно и некрасиво.

Необходимо “конвертировать” эти три колонки в одну.

Различная величина шрифтов

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

Необходимо задать отдельные стили для мобильных устройств.

Подробнее о подключении нестандартных шрифтов и оптимизации скорости их загрузки смотрите в статье-мануале здесь.

Различные отступы между блоками и полями

Требования по margin и padding для мобильных, компьютеров и планшетов разные.

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

Также страница не будет оптимизирована под использование с мобильных устройств.

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

Избежание горизонтальной прокрутки

Если Вы укажите фиксированную ширину блока, например width=960px, то на широкоугольном мониторе страница будет выглядеть красиво и удобно. А вот на смартфонах и других мониторах возникнет горизонтальная прокрутка. Поэтому для каждого типа устройства следует указывать свою ширину.

Или воспользуйтесь свойствами CSS max-width, min-width.

Удобство навигации

Панель управления и меню сайтов десктопных компьютеров и смартфонов — это разные вещи. Поэтому навигация для компьютеров и смартфонов должны реализовываться по-разному.

Ненужные элементы для мобильной верстки

Некоторые элементы, которые используются для десктопнной версии сайта, в мобильной версии практически не используются и не нужны. Применяйте свойство display:none при применении медиа запросов CSS и Вы уберете ненужные для мобильной версии блоки.

Разрешение экрана в наше время колеблется от 320 px для смартфонов до 2560 px для широкоугольных мониторов.

Медиа выражения могут быть записаны как в общем файле стилей, так и вынесены в отдельный CSS файл с подключением через ссылку в шапке сайта.

Оба способа равнозначны.

Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS

На картинке ниже показан пример подключения медиа запросов, находящиеся в отдельном, собственном CSS файле.

При подключении таблицы стилей используем атрибут media устанавливаем медиа запрос и указываем условия, при которых они должны использоваться.

href=«/assets/mobile.css — указываем путь к файлу CSS со стилями для данного медиа запроса;

Так стили следует записывать, если они разнесены в разные CSS файлы.

Ключевое слово “@media. ” с условиями по нему писать не нужно.

Как записать медиа запрос в общем CSS файле

Если же все стили записаны в одном файле, то медиа запрос необходимо записать после всех стилей CSS, потому что в противном случае они будут переписывать его.

Не забудьте про ключевое слов “@media” и условия по нему.

Рассмотрим синтаксис написания медиа запросов

Типы устройств, для которых указано это правило:

screen — тип устройства, на котором будет применяться это правило. В данном случае это дисплей (экран);
print — принтер или режим предварительного просмотра страницы перед печатью;
all — все типы устройств;
speech — гаджеты, которые читают контент с экрана (скринридеры).

Условия медиа запросов разделяются основными логическими операторами:

and — требуется выполнения всех указанных условий;
запятая “,” — требуется выполнения одного из указанных условий;
not — отрицание указанного условия. Т.е. если указанное условие не выполняется.

В круглых скобках указываются медиа функции. Это простые функции, которые воспринимаются как правило.

Для указания размеров существует 7 основных значений:

min-width;
max-width;
width;
min-height;
max-height.
height.

Для указания ориентации мобильного устройства:

С этим значением устанавливаются определенные стили, в зависимости от того, в каком режиме (альбомном или портретном) будет отображаться сайт. Т.е. в каком положении пользователь будет держать мобильное устройство: в горизонтальном или вертикальном.

Самые распространенные значения — это min-width, max-width, когда нужно применить стили под определенное разрешение экрана смартфона.

Примеры написания медиа запросов

Рассмотрим подробнее в примерах медиа функции, которые задаются под определенные условия по ширине браузера, дисплея.

Для удобства их можно копировать прямо в CSS стили вместе с комментариями.

@media screen and (max-widht:1080px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с шириной не более 1080 px. Если ширина экрана будет более 1080 px, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (max-width: 1920px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1920 px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-width: 1080px) and (max-width: 1920px)

/*Данное правило предназначено для дисплеев/браузеров с шириной более 1080px и менее 1920px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (min-height: 720px) < .container < margin: 48px; line-height: 29px; font-size:16px; >>

/*Данное правило предназначено для дисплеев/браузеров с высотой 720 px. Если высота экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться.*/

@media (orientation: landscape)

/* При альбомном (горизонтальном) отображении сайта его блоки будут отображаться в строку */

> @media (orientation: portrait) < ;body < flex-direction: column; >>

/* При портретном (вертикальном) отображении сайта его блоки будут отображаться вертикально */

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

Шрифт слишком мелкий;
Блоки расположены слишком близко;
Появляется горизонтальная прокрутка.

Выводы

В современных реалиях медиа запросы CSS — это важный прием для оптимизации верстки сайта, скорости загрузки, удобства для пользования со смартфона или планшета. Как следствие более успешного продвижения и ранжирования в поисковой выдаче.

Из написанного выше можно сделать следующие выводы по медиа выражениям:

Запрос состоит из ключевого слова @media, одного или нескольких условий с логическими операторами для их комбинирования и CSS стилей, которые необходимо применить, в случае выполнения условий;
Самые распространенные условия — это min-width, max-width;
Выражения в общих CSS файлах необходимо записывать после всех стилей;
Выражения с большим объемом CSS стилей записывайте в отдельный файл, с привязкой ссылки на него в основном HTML документе. При этом ключевое слово @media с фигурными скобками к нему в этом отдельном файле писать не нужно, только CSS стили;
Используйте выражения для оптимизации мобильной верстки, недопущения горизонтальной прокрутки, оптимизации размера шрифтов.

При написании этой статьи использовались материалы от: Александра Мальцева, видео блогов Web Developer Blog, WebDev.

Подписывайтесь на наш телеграмм — канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.

CSS медиа-запросы (media queries)

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

Что такое медиа-запросы

Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа-запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются всеми современными браузерами (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа-запросов (media queries)

Поддержка медиа-запросов в браузере IE8 осуществляется посредством подключения к странице скрипта «respond.js»:

Медиа-запросы предназначены для создания адаптивных дизайнов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер).

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.

Подключение метатега viewport к странице осуществляется так:

Синтаксис

Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий . В качестве условия можно указывать тип устройства или требования к определённой характеристике . Требование к определённой характеристике записывается в круглых скобках .

Комбинирование нескольких условий выполняется с помощью логических операторов .

После составления @media , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Пример медиа-запроса с одним условием:

@media screen { /* стили будут применяться, когда условие истинно */ }

Пример медиа-запроса с комбинированием нескольких условий:

@media (min-width: 992px) and (max-width: 1199.98px) { . }

Типы устройств

В @media можно указывать определённые типы устройств :

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

Например, этот @media только для экранов:

@media screen { . }

А здесь для экранов и принтеров:

@media screen, print { . }

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

Логические операторы and , , (запятая), not и only предназначены для создания сложных медиа-запросов.

and

Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда каждое из них будет истинным.

Например, следующий @media будет применяться только при выполнении всех трёх условий (это экран, width >= 1200px и ориентация landscape):

@media screen and (min-width: 1200px) and (orientation: landscape) { . }

, (запятая)

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

В этом примере стили будут применяться к странице в двух случаях. Когда width >= 544px или ориентация portrait .

@media (min-width: 544px), (orientation: landscape) { . }

not

Ключевое слово not используется для отрицания.

При использовании not с and отрицание работает для всего медиа-запроса. При этом, когда указываем not необходимо обязательно задавать тип устройства.

Например, применим стили только в том случае, когда не (экран и width >= 411px и height >= 731px) .

@media not screen and (min-width: 411px) and (min-height: 731px) { . }

При использовании not в выражении с запятой он добавляет отрицание только для этой части.

Например, применим стили когда истинно следующее условие: не экран или не width >= 411px .

@media not screen, not (min-width: 411px) { . }

only

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

Медиа-характеристики

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

Каждая характеристика в @media должна быть заключена в круглые скобки.

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

width

Медиа-характеристика width позволяет задать условие на равенство ширины области просмотра определённому значению.

Например, применим CSS только для viewport с шириной 320px.

@media (width: 320px) { . }

Для определения диапазона можно использовать min-width и max-width .

Например, @media для ширины viewport от 576px до 1200px:

@media (min-width: 576px) and (max-width: 1199.98px) { . }

Для ширины больше 768px:

@media (min-width: 768px) { . }

Если нужно меньше 1400px:

@media (max-width: 1399.98px) { . }

height

Для задания условий в отношении высоты viewport можно использовать height , min-height и max-height .

Например, @media для высоты viewport больше 720px:

@media (min-height: 720px) { . }

orientation

С помощью orientation можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.

Например, в зависимости от ориентации viewport будем отображать разные картинки:

@media (orientation: landscape) { .cover { background: url(bg-l.png) no-repeat; } } @media (orientation: portrait) { .cover { background: url(bg-p.png) no-repeat; } }

aspect-ratio

Характеристики aspect-ration , min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.

/* Minimum aspect ratio */ @media (min-aspect-ratio: 9/16) { .header { background-color: #0dcaf0; } } /* Maximum aspect ratio */ @media (max-aspect-ratio: 16/9) { .header { background: #ffc107; } } /* Exact aspect ratio */ @media (aspect-ratio: 1/1) { .header { background: #6c757d; } }

resolution

Характеристики resolution , min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.

Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:

/* Default */ p { font-size: 16px; } /* Minimum resolution */ @media (min-resolution: 150dpi) { p { font-size: 14px; } }

Стили для печати страницы с плотностью пикселей больше 300dpi:

@media print and (min-resolution: 300dpi) { . }

Медиа-запросы в и @import

При подключении таблицы стилей можно с помощью атрибута media установить медиа-запросы и тем самым определить условия, когда они должны использоваться.

Кроме , их также можно использовать в @import :

@import url(mobile.css) screen and (max-width: 991.98px); @import url(desktop.css) screen and (min-width: 992px);

Медиа-запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */ /* Стили CSS (по умолчанию) - для ширины 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 = 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) { . }

Дополнения из Media Queries Level 4

Media Queries Level 4 – это четвертая редакция спецификации для @media .

В ней определён новый и более простой синтаксис для создания диапазона. То есть теперь можно вместо функций min-* и max-* (например, min-width и max-width ) использовать обычные математические операторы сравнения: > , < , >= или

Кроме этого, Media Queries Level 4 включает четыре медиа-функции, которые относятся к категории взаимодействия: pointer , any-pointer , hover и any-hover . С помощью них можно адаптировать сайты и веб-приложения для различных устройств в зависимимости от наличия у них указателя, а также от того на сколько он точен.

Функция hover позволяет определить, может ли основное устройство ввода наводить курсор на элементы. Она принимает два значения: hover и none :

/* для устройств, в которых основной механизм ввода позволяет навести указатель на элемент */ @media (hover: hover) { /* . */ } /* если основное устройство ввода не позволяет навести указатель на элемент */ @media (hover: none) { /* . */ }

Медиа-функция pointer позволяет нам адаптировать взаимодействие с сайтом в зависимости от наличия указателя у основного механизма ввода и его точности. Она может иметь одно из трёх значений:

none – нет указателя (например, смартфоны, взаимодействие с которыми осуществляется с помощью пальцев);
coarse – имеет указатель с ограниченной точностью (например, пульт дистанционного управления Smart TV);
fine – имеет точное указательное устройство (например: мышь, тачпад или стилус).

Пример объединения этих функций для определения устройств разных типов:

/* смартфоны, устройства с сенсорными экранами */ @media (hover: none) and (pointer: coarse) { /* . */ } /* устройства с сенсорными экранами, в которых основным механизмом ввода является стилус */ @media (hover: none) and (pointer: fine) { /* . */ } /* Smart TV, игровые консоли */ @media (hover: hover) and (pointer: coarse) { /* . */ } /* десктопы и ноутбуки, в которых основным механизмом ввода является мышь или тачпад */ @media (hover: hover) and (pointer: fine) { /* . */ }

Если функции hover и pointer определяют на соответствие только основной механизм ввода, то any-hover и any-pointer – вообще любой из механизмов ввода этому условию.

Код JavaScript, учитывающий параметры устройств

Чтобы определить, соотвествует ли документ строке медиа-запроса, в JavaScript имеется функция matchMedia() .

matchMedia() является методом объекта window . Его использование практически ничем не отличается от CSS медиа-запросов:

JavaScript

// создаём новый объект MediaQueryList, с помощью которого хотим проверить, больше ли ширина области просмотра 768px const mediaQuery = window.matchMedia('(min-width: 768px)'); // получаем значение свойства matches, и проверяем является ли оно истинным if (mediaQuery.matches) { // если matches содержит true, то выведется alert alert('Документ соотвествует медиа-запросу!'); }

Таким образом, суть работы в JavaScript сводится к передаче строки медиа-запроса в matchMedia() , и последующей проверки свойства matches . Это свойство доступно только для чтение и содержит логическое значение. true – если документ соотвествует медиа-запросу, false – в противном случае.

Например, установим цвет фона в зависимости от ширины области просмотра:

JavaScript

if (window.matchMedia('screen and (width >= 768px)').matches) < document.body.style.backgroundColor = 'black'; >else

Этот код выполнится один раз и при изменении размера области просмотра цвет фона не обновится.

Если нам нужно реагировать на изменения статуса медиа-запроса, то можно воспользоваться методом addListener() . Этот метод принимает функцию обратного вызова, которая будет вызываться каждый раз при изменении статуса медиа-запроса:

JavaScript

// создаём медиа-запрос const mediaQuery = window.matchMedia('screen and (width >= 768px)'); // объявляем функцию handleBreakpointChange const handleBreakpointChange = (e) => < document.body.style.backgroundColor = e.matches ? 'black' : 'yellow'; >// регистрируем функцию handleBreakpointChange в качестве обработчика события, возникающего при изменении состояния медиа-запроса mediaQuery.addListener(handleBreakpointChange); // handleBreakpointChange(mediaQuery);

Теперь функция handleBreakpointChange будет вызываться каждый раз при изменении статуса медиа-запроса.

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

Удаления добавленного обработчика осуществляется с помощью метода removeListener() :

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia() не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript)

JavaScript

if (Modernizr.mq('(max-width: 767px)')) { // . действия, если устройство соответствует указанному медиа-условию } else { // . действия, если устройство не отвечает заданному медиа-условию }

Если статья понравилась, то поделитесь ей в социальных сетях:

Комментарии: 43

10.09.2022, 17:38

Александр, добрый день! Подскажите как лучше сделать?
Задача: Нужно сделать рекламные блоки для мобильной и pc версии. т.е чтобы на мобильных устройствах отображалась одна реклама и на компьютерах другая.
В голову приходит что то на вроде этого варианта, но кажется этот вариант топорным, если не затруднить можете подсказать со своего взгляда, норм вариант? Либо делается более грамотно и проще?
Спасибо!

 @media screen and (min-width: 480px) { .reklama_mobile { display: none; } } @media (max-width: 480px) { .reklama_PC { display: none; } }

Александр Мальцев
16.09.2022, 12:01

Добрый день! Я так понимаю, будут вставлены 2 рекламных блока. Просто один из них не будет виден. Если так, то лучше через JavaScript это сделать. Тут нужно просто определить ширину с помощью JavaScript, и вставить либо один, либо другой блок рекламы.

26.05.2022, 10:36

Добрый день!
Подскажите пожалуйста, мне нужно при загрузке сайта выбрать определенный файл header.php
(этих файлов два, под разные устройства ) Сейчас выбор нужного файла происходит на заголовка запроса браузера User-Agent. Те учитывая выбор опер системы (Windows или Android) я подгружаю нужный header.php. Но этого недостаточно, мне еще нужно учитывать параметр — CSS ширину устройства--.Те в первом же ответе от сервера должен отправляться контент с правильным файлом header.php.Метод windows.matchMedia отработает уже после получения контента, после построения DOM.

24.07.2021, 20:42

Благодарю, отличная статья. Я не опытный пользователь, но за 2 дня разобрался.
И вот результат: «spacser-shop.com.ua». Еще сыровато, но все впереди. С меню бургер или гамбургер разберусь и будет топ.
До этого стоял и стоит код:

Раньше прокатывал под мобильную версию. Но с 2021 г. начал замечать в «search.google.com», что сайт не соответствует требованиям об удобстве страниц для мобильных. С каждым днем +20 страниц.
Но вашей статьей очень доволен. Спасибо.

04.03.2021, 18:36

Добрый день! Подскажите, пожалуйста, как перестроить расположение блоков в зависимости от устройства?
Я создал в коде html 3 варианта расположения блоков. Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript (скриншот)?

    
    
 = 1200px -->

06.03.2021, 10:08
Уже разобрался!
Александр Мальцев
08.03.2021, 15:48
Привет! Отлично!
05.10.2020, 18:50
Супер! Спасибо Вам большое за ваше время и работу.
Александр Мальцев
08.10.2020, 14:06
Спасибо! Очень приятно читать такие отзывы.
28.07.2020, 22:39

Здравствуйте. Подскажите, пожалуйста, можно ли с помощью медиа запроса «разбить» блок? при отображении на ширине 480px должен отображаться один блок с текстом, а при 1000рх и больше — он должен разбиваться на два одинаковых по ширине, по бокам страницы.
вот этот код даёт только один блок слева при 1000рх, как получить второй?

body { min-width: 480px; overflow-x: hidden; } .company__left { border-top: 8px solid #1C5395; border-bottom: 8px solid #D28C57; background-color: #FCFCFD; position: absolute; width: 365px; height: 1148px; left: calc(50% - 365px/2 - 0.5px); top: 6011px; } @media (min-width: 768px) { .company__left { height: 980px; left: calc(50% - 365px/2 - 133.5px); top: 4748px; } } @media (min-width: 1000px) { .company__left { height: 605px; left: calc(50% - 365px/2 - 317.5px); top: 4748px; } } @media (min-width: 1920px) { .company__left { width: 479px; left: calc(50% - 479px/2 - 400.5px); top: 3846px; } }

Александр Мальцев
30.07.2020, 15:31

Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье.

02.08.2020, 09:29

Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…

Александр Мальцев
03.08.2020, 14:25
Это можно выполнить с помощью CSS Flexbox и медиа-запросов.
05.08.2020, 19:04

Привет, я делаю автофилия или же автозаполнение данных и столкнулся с такой проблемой, что делать?
Вот видео :https://yadi.sk/i/iU9sBd6YiSWMYA (20 секнуд)и если не. трудно не могли бы вы телеграмм оставить?

Алексей Чернавцев
28.07.2020, 17:03

Добрый день!
Такой вопрос, применил в js

if (window.matchMedia('screen and (max-width: 543px)').matches) {}

Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер

Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?

Александр Мальцев
30.07.2020, 15:24

Здравствуйте!
Так, конечно, у вас код сработает один раз.
В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:

window.onresize = function(){ if (window.matchMedia('screen and (max-width: 543px)').matches) {} };

Алексей Чернавцев
31.07.2020, 16:11
Большое спасибо 🙂
29.10.2019, 18:24

Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо)

29.10.2019, 00:05

Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?

  Заголовок Текст

Александр Мальцев
29.10.2019, 01:19

Привет!
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.

29.10.2019, 11:33

Медиа запросы в Bootstrap CSS

Спасибо большое за ответ, но до этого делал сайт с точно такой же сборкой, сейчас юзаю его все хорошо брейкпоинты стандартные работают.

Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)

Александр Мальцев
29.10.2019, 13:15

Это работает очень просто.

Первое 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.

22.09.2019, 16:25

Перечень медиа-запросов для 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) { . }

Добрый день! У меня такой вопросик возник по данной конструкции. Правильно ли я понял, что последняя строка @media (min-width: 1200px) {… } здесь не обязательна, т.к. после (min-width: 992px) and (max-width: 1199px) будут срабатывать наши основные стили.

Александр Мальцев
23.09.2019, 08:06

Привет! Эта строка обязательна. Если например viewport имеет ширину 1000px, то сначала сработает эта конструкция:

@media (min-width: 992px) and (max-width: 1199px) { . }

После неё сработают следующие стили, т.к. они не заключены в @media (min-width: 1200px) { … }. В этом случае они переопределят те что были, т.к. они идут после них.

17.06.2019, 10:22

Здравствуйте! Спасибо за статью… но помогите разобраться, я никак не могу понять и всё время путаюсь, каким образом делается адаптивность через @media (min-width). Я все время использую @media (max-width). Мне дают макет, я по нему делаю верстку, а потом уменьшаю экран и пишу медиазапросы @media (max-width)… Но min-width идет от меньшего к большему и у меня всё в голове «ломается», ведь изначально уже сделано всё для большего размера, а тут получается каждый брейкпоин идет к большему. Подскажите, как их правильно применять?

Александр Мальцев
17.06.2019, 14:48

"@media (min-width)" удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования "@media (min-width)".

/* дефолтные стили */ h1 { font-size: 20px; font-weight: bold; }

Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в "@media (min-width)".

@media (min-width: 576px) { h1 { font-size: 24px; } }

При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без "@media (min-width)", потом, например, с использованием правила "@media (min-width: 576px)", далее с "@media (min-width: 768px)" и т.д.

Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.

17.06.2019, 18:40

Спасибо за развернутый ответ! Я конечно, не так давно верстаю, но всё что не смотрю видео уроки, примеры и т.д., везде начинают с верстки макета как он есть, т.е. самый большой размер, а потом уменьшают. Мне стало интересно, т.е. главный CSS файл нужно начать писать для самого маленького разрешения, а потом расширять? У меня сразу в голове прокручивается картина: а как так можно подгадать всё, чтобы дойдя до самого большого размера всё сошлось с макетом, все верхние-нижние отступы и т.д. Ведь когда делаешь вначале по макету, то делаешь почти pix-to-pix, а потом уже произвольно уменьшаешь, чтобы смотрелось. А в случае с «Mobile First», получается мы наугад задаём размеры для мобильного вида и потом увеличиваем их… это ведь надо так подгадать, чтобы в итоге по макету встало *) Или на практике, это не так сложно?
P.S: нет ли у вас на сайте видео примера такой верстки?

Александр Мальцев
19.06.2019, 01:06

Таких видео примеров нет. Но, их можно поискать в Youtube по ключевой фразе «Mobile First». В случае если имеется только большая картинка по который вы строите макет, то придётся просто всё более тщательно продумывать. Начинайте создавать макет, начиная c основного каркаса и сразу под все устройства, начиная с мобильных. Потом переходите к детализации основных структурных блоков, далее к детализации того, что ещё не детализировано и т.д. При этом необходимо создавать так, чтобы готовый блок в некоторой ячейке вашего макета можно было просто перенести в другую ячейку вашего макета без изменения кода CSS. При этом если нужно «pix-to-pix», то оставляйте это под конец. В конце, когда макет будет готов под все устройства немного измените стили для больших экранов, чтобы получить его «pix-to-pix».

shohinform
17.01.2019, 23:25
можно ли написать media запрос для каждого карусела?
Александр Мальцев
22.01.2019, 15:21
Не знаю что такое «карусела». Медиа-запросы можете написать под любые размеры, так как вам нужно.
Sergey Ionov
02.06.2018, 13:43

max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
/* стили, которые будут применены к элементам страницы с рабочей областью больше 1199 пикселей */

@media (min-width: 1199px) { /* Стили CSS . */ }

Этот пример наверное стоило бы переписать так:
/* стили, которые будут применены к элементам страницы с рабочей областью не больше 1199 пикселей */

@media (max-width: 1199px) { /* Стили CSS . */ }

Александр Мальцев
05.06.2018, 13:51
Спасибо за дельные замечания. Все эти моменты поправил в статье.
Sergey Ionov
02.06.2018, 13:32

, (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.

@media (min-width: 544px), (orientation: landscape) { /* Стили CSS . */ }

Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 1200 пикселей (включительно) или ориентацию landscape.

Наверное здесь хотели написать не 1200, а 544 пикселей?
21.05.2018, 14:54

@media (mах-width: 768px)

размер экрана iphone se 1136x640 то есть по идее на портерной ориентации он должен сработать, а на альбомной — нет, но по факту получается что он срабатывает и в том и другом случае.
Если изменять окно браузера то все работает корректно, на телефонах по другому пиксели считаются?

Александр Мальцев
21.05.2018, 15:29

Познакомьтесь с тем, как работает viewport. На данном устройстве скорее всего установлен коэффициент 2 (CSS разрешение 568х320 пикселей). Т.е. один CSS пиксель формируется с помощью 4 физических пикселей.

18.11.2017, 14:42

Здравствуйте, хотелось бы узнать, как вы сделали меню на этом сайте? мой респект)) если не секрет, конечно

Александр Мальцев
18.11.2017, 17:07
Здравствуйте! Конечно не секрет, это обычное Bootstrap меню (компонент Navbar).
02.11.2017, 23:22

Здравствуйте! Подскажите, можно ли в Bootstrap 4 задать дополнительный медиазапрос, например, для 1300px?

Александр Мальцев
03.11.2017, 16:30

Здравствуйте! Если нужно, конечно создавайте. Тут нет разницы, используете ли вы Bootstrap или нет.
Например, для экранов, имеющих минимальную ширину 1300px:

/* >=1300 */ @media (min-width: 1300px) { /* . */ }

27.02.2017, 09:42

Александр, приветствую.
Начал разбираться с медиа запросами почитал примеры на хабре попробовал ради эксперимента, и сразу же столкнулся с вопросом.
Ниже код:

     MediaQueryes        
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
 Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
 Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Просматриваем в Chrome.
По F12 открываем консоль, включаем просмотр на разных устройствах и начинаем с самого начала. BlackBerry Z30 с размерами 360 на 640 — прописали медиазапросы, все входит, при обеих ориентациях, — все отлично.
Переходим к следующему в списке BlackBerry PlayBook с размерами 600 на 1024, — прописали медиазапросы, подогнали, все отлично, возвращаемся на посмотреть, что произошло с BlackBerry Z30 — все уплыло.
А там у Хрома еще очень длинный список…

Подскажите, как в таких случаях бороться? Скорее даже вопрос во внятном пояснении принципов.

Александр Мальцев
28.02.2017, 16:49

При создании адаптивной разметки необходимо определиться с основными контрольными точками. Например, 576px, 768px, 992px и 1200px. Эти точек может быть больше или меньше в зависимости от реализуемого макета. Эти точки должны определять изменения в верстке. Т.е. до 576px должна быть одна разметка, при 576px и выше другая, при 768px и больше тоже другая и т.д.

При этом правила необходимо располагать в следующем порядке:

/* устройства (до 576px) */ /* стили. */ /* >= 576px) */ @media (min-width: 576px) { /* стили. */ } /* >=768px) */ @media (min-width: 768px) { /* стили. */ } /* и т.д. */

При этом не обязательно их ограничивать с помощью max-width. Т.е. если у вас в браузере CSS ширина рабочей области равно, например 600px. То будут применены CSS-свойства с условием min-width: 576px, т.к. они расположены после тех, которые предназначены для устройств до 576px. А стили для устройств >=768px применены не будут, т.к. текущая ширина устройства не отвечает этому условию.

Не работают медиа-запросы

Я правильно понимаю вообще. Если ширина экрана,например, 900, то фон должен быть #2f2f, если 1000 - #000?

Смотрю в инспекторе кода: при 900 - #000, при 1000 - цвет по дефолту(аля белый), #2f2f начинает работать на 744px.
В чем может быть проблема?

P.S. в html строка

meta name="viewport" content = "width=device-width, initial-scale = 1">

прописана. Все запросы пишу в конце css файла.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Не работают медиа-запросы
Доброго времени суток, уважаемые. Во время адаптивной верстки через медиа-запросы столкнулся с.

Не работают медиа-запросы
Код HTML: <!DOCTYPE html> <html> <head> <title>Новый препарат </title> <link.

Не работают медиа запросы
Здравствуйте! Помогите новичку, пожалуйста! Есть сайт не responsive. Клиент захотел, чтобы на.

Читать:

Как удалить страницу в microsoft word

Предыдущая запись

Как работают консультанты 1с

Следующая запись

Медиа-запросы

Синтаксис

Логические операторы, применяемые в медиа-запросах

and

not

only

Медиа-функции

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

color (min-color, max-color)

color-index (min-color-index, max-color-index)

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

device-height (min-device-height, max-device-height)

device-width (min-device-width, max-device-width)

grid

height (min-height, max-height)

monochrome (min-monochrome, max-monochrome)

orientation

resolution (min-resolution, max-resolution)

scan

width (min-width, max-width)

Что такое медиа запросы CSS и для чего они нужны

Когда целесообразно их применение

Страница сверстана в несколько колонок

Различная величина шрифтов

Различные отступы между блоками и полями

Избежание горизонтальной прокрутки

Удобство навигации

Ненужные элементы для мобильной верстки

Подключение медиа запроса через в шапке сайта со стилями, которые прописаны в отдельном файле CSS

Как записать медиа запрос в общем CSS файле

Рассмотрим синтаксис написания медиа запросов

Примеры написания медиа запросов

Выводы

CSS медиа-запросы (media queries)

Что такое медиа-запросы

Синтаксис

Типы устройств

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

and

, (запятая)

not

only

Медиа-характеристики

width

height

orientation

aspect-ratio

resolution

Медиа-запросы в и @import

Медиа-запросы для Bootstrap 3

Медиа-запросы для Bootstrap 4

Дополнения из Media Queries Level 4

Код JavaScript, учитывающий параметры устройств

Комментарии: 43

Не работают медиа-запросы

Похожие записи