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

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

  @media (not (hover)) {...}  

Тестирование нескольких функций с помощью

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

  @media (not (color)) или (hover) {...}
  

Программное тестирование медиа-запросов - CSS: каскадные таблицы стилей

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

Прежде чем вы сможете оценить результаты медиа-запроса, вам необходимо создать объект MediaQueryList , представляющий запрос. Для этого используйте метод window.matchMedia .

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

  const mediaQueryList = window.matchMedia ("(ориентация: портрет)");
  

Создав список медиа-запросов, вы можете проверить результат запроса, посмотрев значение его свойства соответствует :

  если (mediaQueryList. Спички) {
  
} еще {
  
}
  

Если вам нужно постоянно быть в курсе изменений оцениваемого результата запроса, более эффективно зарегистрировать слушателя, чем опрашивать результат запроса. Для этого вызовите метод addListener () для объекта MediaQueryList с функцией обратного вызова, вызываемой при изменении статуса медиа-запроса (например, тест медиа-запроса изменяется с true на false ):

 
const mediaQueryList = окно.matchMedia ("(ориентация: портрет)");


function handleOrientationChange (mql) {
  
}


handleOrientationChange (mediaQueryList);


mediaQueryList.addListener (handleOrientationChange);
  

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

Функция handleOrientationChange () будет смотреть на результат запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:

  function handleOrientationChange (evt) {
  if (evt.matches) {
    
  } еще {
    
  }
}
  

Выше мы определяем параметр как evt - объект события. Это имеет смысл, потому что более новые реализации MediaQueryList обрабатывают прослушиватели событий стандартным образом. Они больше не используют необычный механизм MediaQueryListListener , а стандартную настройку прослушивателя событий, передавая объект события типа MediaQueryListEvent в качестве аргумента функции обратного вызова.

Этот объект события также включает в себя media и соответствует свойствам , поэтому вы можете запросить эти функции MediaQueryList , напрямую обращаясь к нему или обращаясь к объекту события.

Чтобы перестать получать уведомления об изменениях значения вашего медиа-запроса, вызовите removeListener () в MediaQueryList , передав ему имя ранее определенной функции обратного вызова:

  mediaQueryList.removeListener (handleOrientationChange);
  

Интерфейс MediaQueryList

Таблицы BCD загружаются только в браузере

Медиа-запросы CSS и использование доступного пространства

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

Синтаксис медиа-запроса CSS для вызова внешней таблицы стилей выглядит следующим образом:

Возможно, вам знаком атрибут мультимедиа, обычно это «экран» или «печать», или даже список, разделенный запятыми, например «экран, проекция».Атрибут media может быть перенесен непосредственно в файл CSS, например:

  @media screen {
  тело {
    ширина: 75%;
  }
}

@media print {
  тело {
    ширина: 100%;
  }
}  

Точно так же вы можете использовать более сложные медиа-запросы CSS, например:

  @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  тело {
    фон: #ccc;
  }
}  

Вы можете использовать столько медиа-запросов, сколько хотите в файле CSS.Обратите внимание, что вы можете использовать операторы и , чтобы требовать, чтобы несколько запросов были истинными, но вы должны использовать запятую (,) в качестве оператора или для разделения групп из нескольких запросов. Ключевое слово , а не также может использоваться для изменения логики.

Пример

Допустим, у нас есть дизайн с плавной шириной, в котором боковая панель составляет 35% ширины страницы. Это означает, что в зависимости от ширины окна браузера эта боковая панель может быть довольно узкой или довольно широкой, что является характером дизайна с изменяемой шириной.С помощью медиа-запросов CSS мы можем сказать: «Если браузер действительно узкий, сделайте это, если он шире, сделайте это, если он действительно широкий, сделайте это». Обратите внимание, что измерение ширины - это не единственное, что могут делать медиа-запросы, это просто практический пример.

На боковой панели нашего примера у нас будет список имен суперкоманды, которые функционируют как ссылки для электронной почты. HTML довольно прост:

  

   
  Крис Койер  
   
  Элизабет Мосс  
   
  Аманда Ригетти  
  

Это просто список ссылок.Атрибут href представляет собой ссылку mailto: . Единственное, что может показаться вам необычным, - это атрибут data-email . В HTML5 вы можете использовать атрибуты с префиксом data- для хранения информации, и это совершенно верно. Мы собираемся использовать эти данные позже, но значение href - это не совсем то, что нам нужно, имея ссылку mailto: , следовательно, атрибут данных.

Стиль по умолчанию для списка будет следующим:

  #sidebar ul li a {
  цвет: # 900;
  текстовое оформление: нет;
  отступ: 3px 0;
  дисплей: блок;
}  

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

  @media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../ images / email.png) левый центр без повтора;
  }
}  

По мере того, как мы становимся шире, от 700 до 1000 пикселей, мы снова будем использовать дополнительное пространство, чтобы добавить перед ссылками текст «Электронная почта:» (с использованием содержимого CSS) вместо просто значка.

  @media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a: before {
    содержание: «Электронная почта:»;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}  

. Еще шире, при ширине окна браузера выше 1001 пикселей мы буквально добавляем адрес электронной почты к ссылкам.Вот здесь-то и пригодится атрибут данных HTML5.

  @media all and (min-width: 1001px) {
  #sidebar ul li a: after {
    content: "(" attr (data-email) ")";
    размер шрифта: 11 пикселей;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}  

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

  @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../ images / email.png) левый центр без повтора;
  }
}  

Теперь все вместе

  #sidebar ul li a {
  цвет: # 900;
  текстовое оформление: нет;
  отступ: 3px 0;
  дисплей: блок;
}

@media all and (min-width: 1001px) {
  #sidebar ul li a: after {
    content: "(" attr (data-email) ")";
    размер шрифта: 11 пикселей;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}

@media all and (max-width: 1000px) и (min-width: 700px) {
  #sidebar ul li a: before {
    содержание: «Электронная почта:»;
    стиль шрифта: курсив;
    цвет: # 666;
  }
}

@media all and (max-width: 699px) и (min-width: 520px), (min-width: 1151px) {
  #sidebar ul li a {
    отступ слева: 21px;
    фон: url (../images/email.png) левый центр без повтора;
  }
}  

Видео-демонстрация

Live demo / скачать

Посмотреть демоверсию Скачать файлы

Поддержка браузера

Браузер поддерживает медиа-запросы на удивление достойно. Для запросов в этой конкретной демонстрации (с использованием минимальной и максимальной ширины) текущая версия Firefox, Safari (включая Mobile), Chrome и Opera все это поддерживают.Internet Explorer 9 будет поддерживать его, а 8 и ниже - нет. Если бы я хотел обеспечить наилучшие возможности в IE 8 и ниже, я бы либо подделал его с помощью JavaScript, как я сделал в этой статье, либо использовал специальную таблицу стилей IE и стилизовал ее в том же стиле, что и наиболее распространенная ширина браузера в соответствии с в аналитику.

Обратите внимание, что пробег может различаться для отдельных типов запросов. Например, iPhone поддерживает запросы ширины, но не поддерживает запросы ориентации. IPad поддерживает и то, и другое.

Подробнее о медиа-запросах

Измерение ширины - хороший практический пример медиа-запросов, но это не единственное, что доступно. Ниже приведены некоторые из них (не полный список). Спецификация перечисляет намного больше.

Типы

HTML4 были эти типы мультимедиа, которые все еще действительны: слуховой, шрифт Брайля, портативный, печать, проекция, экран, tty и tv. HTML5 может включать больше, если они ему нужны. В спецификацию включены «3D-очки», что потрясающе. Ключевое слово all будет нацелено на все типы.

  @ экран мультимедиа, проекция {...}  

Размеры

Вы получаете высоту и ширину, которые запрашивают текущую высоту и ширину окна браузера. Вы можете использовать их как есть, но это, вероятно, будет редкостью. Оба они принимают префиксы min / max, поэтому чаще вы использовали их как min-width, max-width, min-height, max-height.

Также есть ширина устройства и высота устройства, которые также предоставляют минимальную ширину устройства, максимальную ширину устройства, минимальную высоту устройства и максимальную высоту устройства.

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

Ориентация / Соотношение сторон

Можно запросить соотношение сторон экрана, а также соотношение сторон устройства.

  @media screen и (соотношение сторон устройства: 16/9) {...}  

Или если экран находится в портретном (высота больше ширины) или альбомном (ширина больше высоты) режиме.

  @media (ориентация: книжная) {...}  

Цвет

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

  @media (color) {/ * Цветной экран * /}

@media (min-color-index: 256) {/ * На экране не менее 256 цветов * /}

@media (монохромный) {/ * Экран монохромный * /}  

В другом месте

В последнее время это горячая тема. Вы можете услышать, как некоторые умные люди говорят об этом на The Big Web Show. Вот еще несколько интересных применений, которые можно найти в последнее время:

• Энди Кларк показывает, как чем больше длина строки, тем более читабельным может быть текст при более высокой высоте строки.
Сайт
• Джона Хика перестраивается, чтобы иметь двойные боковые панели, одинарную боковую панель или отсутствие боковой панели в зависимости от доступного места. Он даже прекрасно масштабируется до мобильных размеров.
• В демонстрации Этана Маркотта для A List Apart не используются медиа-запросы, но показаны другие способы обеспечения гибкости дизайна.
На сайте
• Саймона Коллисона сетка изменена для соответствия разным размерам браузера.
• Panic использует @media в своих электронных письмах в формате HTML, чтобы они отлично смотрелись в почтовых клиентах для настольных компьютеров или мобильных устройств.

Обзор · Bootstrap

Компоненты и опции для компоновки вашего проекта Bootstrap, включая упаковку контейнеров, мощную систему сеток, гибкий медиа-объект и адаптивные служебные классы.

Контейнеры

Контейнеры являются самым основным элементом макета в Bootstrap и требуются при использовании нашей сеточной системы по умолчанию . Выберите из адаптивного контейнера фиксированной ширины (это означает, что его максимальная ширина изменяется в каждой точке останова) или гибкой ширины (это означает, что ширина 100% все время).

Хотя контейнеры могут быть вложенными, для большинства макетов вложенный контейнер не требуется.

Используйте .container-fluid для контейнера полной ширины, охватывающего всю ширину области просмотра.

  

  ...
  

Адаптивные точки останова

Поскольку Bootstrap разработан в первую очередь для мобильных устройств, мы используем несколько медиа-запросов для создания разумных точек останова для наших макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.

Bootstrap в основном использует следующие диапазоны медиа-запросов - или точки останова - в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
// Нет медиа-запроса, так как это значение по умолчанию в Bootstrap

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (минимальная ширина: 768 пикселей) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}  

Поскольку мы пишем наш исходный CSS на Sass, все наши медиа-запросы доступны через миксины Sass:

  @include media-breakpoint-up (xs) {...}
@include media-breakpoint-up (sm) {...}
@include media-breakpoint-up (md) {...}
@include media-breakpoint-up (lg) {...}
@include media-breakpoint-up (xl) {...}

// Пример использования:
@include media-breakpoint-up (sm) {
  .some-class {
    дисплей: блок;
  }
}  

Иногда мы используем медиа-запросы, которые идут в другом направлении (данный размер экрана или меньше ):

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (max-width: 575,98 пикселей) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, менее 768 пикселей)
@media (max-width: 767,98 пикселей) {...}

// Средние устройства (планшеты, менее 992 пикселей)
@media (максимальная ширина: 991.98px) {...}

// Большие устройства (рабочие столы, менее 1200 пикселей)
@media (max-width: 1199,98 пикселей) {. ..}

// Очень большие устройства (большие рабочие столы)
// Нет медиа-запроса, так как очень большая точка останова не имеет верхней границы по ширине  

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

Еще раз, эти медиа-запросы также доступны через миксины Sass:

  @include media-breakpoint-down (xs) {...}
@include media-breakpoint-down (sm) {...}
@include media-breakpoint-down (md) {...}
@include media-breakpoint-down (lg) {...}  

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

  // Очень маленькие устройства (портретные телефоны, менее 576 пикселей)
@media (максимальная ширина: 575.98px) {...}

// Маленькие устройства (телефоны с горизонтальной ориентацией, 576 пикселей и выше)
@media (min-width: 576px) и (max-width: 767,98px) {...}

// Средние устройства (планшеты, 768 пикселей и выше)
@media (min-width: 768px) и (max-width: 991.98px) {...}

// Большие устройства (настольные компьютеры, 992 пикселей и выше)
@media (min-width: 992px) и (max-width: 1199.98px) {...}

// Очень большие устройства (большие рабочие столы, 1200 пикселей и выше)
@media (min-width: 1200px) {...}  

Эти медиа-запросы также доступны через миксины Sass:

  @include media-breakpoint-only (xs) {...}
@include media-breakpoint-only (sm) {...}
@include media-breakpoint-only (md) {...}
@include media-breakpoint-only (lg) {...}
@include media-breakpoint-only (xl) {...}  

Точно так же медиа-запросы могут охватывать несколько значений ширины точки останова:

  // Пример
// Применяем стили, начиная со средних и заканчивая очень большими. 
@media (min-width: 768px) и (max-width: 1199.98px) {...}  

Миксин Sass для таргетинга на тот же диапазон размеров экрана будет:

  @include media-breakpoint-between (md, xl) {...}  

Z-индекс

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

Эти более высокие значения начинаются с произвольного числа, достаточно большого и достаточно конкретного, чтобы в идеале избежать конфликтов. Нам нужен стандартный набор этих элементов для наших многоуровневых компонентов - всплывающих подсказок, всплывающих окон, панелей навигации, раскрывающихся списков, модальных окон - чтобы мы могли быть достаточно последовательными в поведении.Нет причин, по которым мы не могли использовать 100 + или 500 +.

Мы не поощряем настройку этих индивидуальных значений; если вы измените один, вам, вероятно, придется изменить их все.

  $ zindex-dropdown: 1000! По умолчанию;
$ zindex-sticky: 1020! по умолчанию;
$ zindex-fixed: 1030! по умолчанию;
$ zindex-modal-backdrop: 1040! по умолчанию;
$ zindex-modal: 1050! по умолчанию;
$ zindex-popover: 1060! по умолчанию;
$ zindex-tooltip: 1070! по умолчанию;  

Для обработки перекрывающихся границ внутри компонентов (например,g., кнопки и входы в группах ввода), мы используем младшие однозначные значения z-index из 1 , 2 и 3 для состояний по умолчанию, при наведении и активном состоянии. При наведении / фокусе / активном мы выводим конкретный элемент на передний план с более высоким значением z-index , чтобы показать их границу над соседними элементами.

Понимание медиа-запросов CSS3

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

Медиа-запросы позволяют настраивать представление ваших веб-страниц для определенного диапазона устройств, таких как мобильные телефоны, планшеты, настольные компьютеры и т. Д., Без каких-либо изменений в разметке. Медиа-запрос состоит из типа мультимедиа и нуля или более выражений, которые соответствуют типу и условиям конкретных мультимедийных функций, таких как ширина устройства или разрешение экрана.

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

  / * Смартфоны (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 320px) и (max-width: 480px) {
    / * стили * /
}
/ * Смартфоны (портрет) ---------- * /
@media screen и (max-width: 320px) {
    / * стили * /
}
/ * Смартфоны (альбомная ориентация) ---------- * /
@media screen и (min-width: 321px) {
    / * стили * /
}
/ * Планшеты, iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1024px) {
    / * стили * /
}
/ * Планшеты, iPad (портрет) ---------- * /
@media screen и (min-width: 768px) {
    / * стили * /
}
/ * Планшеты, iPad (альбомная ориентация) ---------- * /
@media screen и (min-width: 1024px) {
    / * стили * /
}
/ * Настольные компьютеры и ноутбуки ---------- * /
@media screen и (min-width: 1224px) {
    / * стили * /
}
/ * Большие экраны ---------- * /
@media screen и (min-width: 1824px) {
    / * стили * /
}  

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

Изменение ширины столбца в зависимости от размера экрана

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

Следующие ниже правила стиля автоматически изменяют ширину элемента контейнера в зависимости от размера экрана или области просмотра.Например, если ширина области просмотра меньше 768 пикселей, она будет покрывать 100% ширины области просмотра, если она больше 768 пикселей, но меньше 1024 пикселей, она будет шириной 750 пикселей и так далее.

  .container {
    маржа: 0 авто;
    фон: # f2f2f2;
    размер коробки: рамка-рамка;
}
/ * Мобильные телефоны (книжная и альбомная ориентация) ---------- * /
@media screen и (max-width: 767px) {
    .container {
        ширина: 100%;
        отступ: 0 10 пикселей;
    }
}
/ * Планшеты и iPad (книжная и альбомная ориентация) ---------- * /
@media screen и (min-width: 768px) и (max-width: 1023px) {
    .container {
        ширина: 750 пикселей;
        отступ: 0 10 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с низким разрешением ---------- * /
@media screen и (min-width: 1024px) {
    .container {
        ширина: 980 пикселей;
        отступ: 0 15 пикселей;
    }
}
/ * Настольные компьютеры и ноутбуки с высоким разрешением ---------- * /
@media screen и (min-width: 1280 пикселей) {
    .container {
        ширина: 1200 пикселей;
        отступ: 0 20 пикселей;
    }
}  

Примечание: Вы можете использовать свойство CSS3 box-sizing для элементов, чтобы создавать более интуитивно понятные и гибкие макеты с гораздо меньшими усилиями.

Изменение макетов в зависимости от размера экрана

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

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

  .column {
    ширина: 48%;
    отступ: 0 15 пикселей;
    размер коробки: рамка-рамка;
    фон: # 93dcff;
    плыть налево;
}
.container .column: first-child {
    маржа-право: 4%;
}
@media screen и (max-width: 767px) {
    .столбец {
        ширина: 100%;
        отступ: 5 пикселей 20 пикселей;
        float: нет;
    }
    .container .column: first-child {
        поле справа: 0;
        нижнее поле: 20 пикселей;
    }
}  

Media Queries Definition

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

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

@media screen и (max-width: 768px)
{
header {height: 70px; }
статья {размер шрифта: 14 пикселей; }
img {максимальная ширина: 480 пикселей; }
}

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

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

Хотя минимальная ширина на сегодняшний день является наиболее распространенной функцией, используемой в медиа-запросах, доступны и многие другие. Примеры включают минимальную ширину устройства, минимальную высоту устройства, соотношение сторон, максимальный индекс цвета, максимальное разрешение, ориентацию и разрешение. Значение разрешения, например, может использоваться для обнаружения дисплеев HiDPI (таких как дисплеи Retina) и загрузки графики с высоким разрешением вместо стандартных изображений.

Обновлено: 15 июня 2015 г.

TechTerms - Компьютерный словарь технических терминов

Эта страница содержит техническое определение медиа-запросов. Он объясняет в компьютерной терминологии, что означают Media Queries, и является одним из многих интернет-терминов в словаре TechTerms.

Все определения на веб-сайте TechTerms составлены так, чтобы быть технически точными, но также простыми для понимания. Если вы сочтете это определение Media Queries полезным, вы можете сослаться на него, используя приведенные выше ссылки для цитирования.Если вы считаете, что термин следует обновить или добавить в словарь TechTerms, отправьте электронное письмо в TechTerms!

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