2.26. CSS3-медиазапросы
В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.
Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.
В HTML4 медиа-запрос записывался следующим образом:
Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:
@media screen < * >Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:
Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.
Медиазапросы, характеристики устройств и разрешения экрана
- Содержание:
- 1. Что такое медиа-запрос
- 2. Логические операторы
- 3. Тип носителя
- 4. Характеристики носителя
- 5. Метатег viewport
- 6. На какие разрешения экрана нужно ориентироваться
- 7. Стратегии использования медиа-запросов
Поддержка браузерами
IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0
1. Что такое медиа-запрос
В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.
Медиа-запросы могут быть добавлены следующими способами:
1) С помощью HTML:
2) С помощью правила @import внутри элемента или внешней таблицы стилей:
@import url(color.css) screen and (color);3) Непосредственно в коде страницы:
4) Внутри таблицы стилей style.css:
@media (max-width: 600px) < #sidebar >Таблица стилей, прикрепленная через тег , будет загружаться вместе с документом, даже если её медиа-запрос вернет ложь.
Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.
2. Логические операторы
С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.
2.1. Оператор 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) <. >.
2.2. Оператор запятая
Оператор запятая работает по аналогии с логическим оператором or .
@media screen, projection < /* CSS-стили */; >В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.
2.3. Оператор 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.4. Оператор only
Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).
media="only screen and (min-width: 401px) and (max-width: 600px)"Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.
3. Тип носителя
Тип носителя представляет собой тип устройства, например, принтеры, экраны.
| Значение | Описание |
|---|---|
| all | Подходит для всех типов устройств. |
| Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати. | |
| screen | Предназначен в первую очередь для экранов цветных компьютерных мониторов. |
| speech | Предназначен для синтезаторов речи. |
CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.
4. Характеристики носителя
К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.
| Параметр | Описание |
|---|---|
| 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 — максимальное. |
device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.
5. Метатег viewport
Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.
Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .
Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .
При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.
6. На какие размеры экрана нужно ориентироваться
При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.
/* 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.
7. Стратегии использования медиа-запросов
Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.
Как подключить медиа запросы?
Подскажите пожалуйста, есть шаблон на Joomla3
Хочу сделать его адаптивным
Подключаю медиа-запросы а они не работают (в head добавил meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″ /> и подключил css media файл)
Подскажите как правильно это сделать
Код
baseurl ?>/templates/conversetlite/css/tdefaut.css" type="text/css" media="all" /> baseurl ?>/templates/conversetlite/css/box.css" type="text/css" media="all" /> baseurl ?>/templates/conversetlite/css/media.css" type="text/css" media="max-width: 700px" /> baseurl; ?>/templates/template; ?>/favicon.gif" /> - Вопрос задан более трёх лет назад
- 6988 просмотров
2 комментария
Оценить 2 комментария
Как использовать медиа-запросы в CSS?
Медиа-запросы — это особые правила применения CSS, с помощью которых можно менять стиль элементов, отталкиваясь от устройств, на которых будут просматривать веб-страницу.
Курс Управління командою в бізнесі.
Онлайн-курс для ефективного управління командою, спрямований на створення проактивних та самостійних команд, де мікроменеджмент не потрібний.
Проще говоря, они позволяют понять, какие именно стили нужно запускать на выбранной странице, а какие — нет. Например, с ними сайт одинаково удобно и красиво отображается на экране смартфона или большом мониторе.
Медиа-запросы стали актуальными в CSS3. На сегодня они поддерживаются всеми современными браузерами, среди которых Chrome, Opera, Firefox, Safari.
Медиа-запросы поддерживаются всеми современными браузерами
Ключевая задача медиа-запросов — адаптивный дизайн сайта. Благодаря им внешний вид страниц будет варьироваться, исходя из размеров монитора или экрана.
Овладеть тонкостями работы с CSS запросами можно на курсах наших партнеров в Mate Academy, Robot Dreams, Powercode Академия.
Синтаксис медиа-запросов
Запись медиа-запросов в теле сайта выглядит вот так:
Курс Front-end Basic.
Оволодій навичками розробки веб-інтерфейсів та стань справжнім Front-end розробником! Заробляй від 800$ на початку карʼєри.
Можно добавлять их в HTML-части сайта, внутри таблицы CSS, а также напрямую в код страницы. Если речь идет о старых браузерах, то можно подключить специальную JavaScript-библиотеку, чтобы медиа-запросы функционировали корректно.
Главные виды устройств, которые можно прописывать в медиа-запросах:
-
все устройства — all ;
Когда-то раньше также использовались:
Курс С++ для GameDevData analyst.
Комплексний курс, який навчить кодити на C++ з нуля, отримай необхідні навички щоб заволодіти затребуваною мовою програмування.
Но в современной версии media queries 4 их принято считать устаревшими.
Также медиа-запросы могут содержать в себе логические операторы, такие как:
- and — все условия должны выполняться одновременно;
- , — хотя бы одно из условия должно выполняться, аналогично «или»;
- not — отрицание условия (имеет более низкий приоритет, чем and , а значит будет выполняться после него).
Для составления условий можно использовать некоторые функции:
- width ( max-width и min-width ) — определяет требования к ширине браузера, наибольшее и наименьшее значения этого параметра в пикселях или других единицах: @media(width: 720px) ;
- height , min-height и max-height — прописывает требования к высоте браузера, аналогично функциям ширины: @media (max -height: 1080px) ;
Курс Стратегический маркетинг.
Від хаосу до системного маркетингу разом із Тетяною Лукинюк, B2C-директором у Kyivstar, колишнім CMO у Coca-Cola, Mars Ukraine та генеральною директоркою у Red Bull Ukraine.
Какие бывают медиа-запросы
Медиа-запросы могут записываться в виде атрибута для элемента link . Это помогает определить, какие файлы CSS-таблиц нужно активировать на странице в зависимости от характеристик устройства. Такой функционал чаще всего используется, когда к разным типам технического оборудования применяются разные стили CSS.
Приведем в пример фрагмент кода, который иллюстрирует подключение файла styles-xs.css для устройств, размер экрана которых меньше 543 пикселей:
Также подобные запросы можно включать в состав правила @import , отвечающего за импорт стилей из других CSS-файлов. Так, для того же файла можно записать следующий код:
@import url(styles-xs.css) (max-width: 543px);
Медиа-запросы можно реализовывать для Bootstrap 3 и Bootstrap 4. Например, можно прописать media queries в порядке увеличения размеров для нескольких классов устройств:
@media (min-width: 768px) < /* Стили для устройств с маленьким экраном, размерами 768px - 991px (планшеты и подобные) */ >@media (min-width: 992px) < /* Стили для ноутбуков и компьютеров с экранами в диапазоне 992px - 1199px */ >@media (min-width: 1200px) < /* Стили для устройств с большой шириной экрана >1200px */ >
Использовать эти медиа-запросы нужно исключительно в таком порядке. Если вы хотите применять их в произвольной последовательности, то добавьте в них максимальное значение. То есть укажите полноценный диапазон размеров экранов в Bootstrap 3:
@media (max-width: 767px) < . >@media (min-width: 768px) and (max-width: 991px) < . >@media (min-width: 991px) and (max-width: 1199px) < . >@media (min-width: 1200px)
Если же речь идет о медиа-запросах в Bootstrap 4, то можно написать такое постепенное увеличение наименьшей ширины экрана:
@media (min-width: 576px) < /* CSS для экранов размером: 576px – 767px */ >@media (min-width: 768px) < /* CSS для: 768px – 991px */ >@media (min-width: 992px) < /* CSS для: 992px – 1119px */ >@media (min-width: 1200px) < /* CSS для экранов больше 1200px */ >
Подобные запросы, но с максимальным значением можно применять в в обратном порядке, чтобы шло убывание размеров экрана. Если вы хотите писать медиа-запросы в рандомной последовательности в таблице стилей, то укажите точные промежутки, то есть сразу пропишите min-width и max-width . Тогда фрагмент кода будет выглядеть вот так:
@media (max-width: 575px) < . >@media (min-width: 576px) and (max-width: 767px) < . >@media (min-width: 768px) and (max-width: 991px) < . >@media (min-width: 992px) and (max-width: 1199px) < . >@media (min-width: 1200px)
Заключение
Медиа-запросы — важный элемент создания оптимизированного дизайна сайта. Они управляют стилями, ориентируясь на технические параметры устройств. Это означает, что CSS-таблицы будут активироваться только после определения того, где именно запускается ресурс. В общем виде медиа-запрос будет состоять из ключевого слова, объявляющего тип устройства, а также выражения для проверки его характеристик.
Курс Аналітик даних.
Протягом 4 місяців ви вивчите повний набір інструментів для аналізу даних та отримаєте можливість працевлаштування в Laba Group.
Использование медиавыражений
Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.
Медиа для разных типов устройств
Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
@media print . >
Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:
@media screen, print . >
Список устройств вы можете найти перейдя по этой ссылке (en-US) . Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.
Узконаправленные @media
Media features (en-US) описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:
@media (hover: hover) . >
Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:
@media (max-width: 12450px) . >
Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
@media (color) . >
Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:
@media speech and (aspect-ratio: 11/5) . >
Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.
Создание комплексных медиавыражений
Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются логические операторы: not , and , and only . Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.
Примечание: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
and
The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
@media (min-width: 30em) and (orientation: landscape) . >
To limit the styles to devices with a screen, you can chain the media features to the screen media type:
@media screen and (min-width: 30em) and (orientation: landscape) . >
comma-separated lists
You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:
@media (min-height: 680px), screen and (orientation: portrait) . >
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.
not
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
@media not all and (monochrome) . >
. so that the above query is evaluated like this:
@media not (all and (monochrome)) . >
. rather than like this:
@media (not all) and (monochrome) . >
As another example, the following media query:
@media not screen and (color), print and (color) . >
. is evaluated like this:
@media (not (screen and (color))), print and (color) . >
only
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
Смотрите также
- Media types (en-US)
- Media features (en-US)
- Testing media queries using code (en-US)
- CSS Animations Between Media Queries
- Extended Mozilla media features (en-US)
- Extended WebKit media features (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.