СправошнаяПоиск

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

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

Основные медиа-запросы

Медиа-запросы определяются с помощью @media at-rule, за которым следует тип мультимедиа, 0 или более функций мультимедиа или как тип мультимедиа, так и функции мультимедиа. Доступные типы носителей:все,Распечатать,экраниречь, а если не указан типвсеподразумевается. Одновременно можно использовать несколько типов носителей, и они должны быть разделены запятыми:

 

@media screen, print {
  /* Styles for screen and print devices */
}

 

Типы носителей, такие кактелевидениеилипроекцияустарели с медиа-запросами уровня 4.

Что касается медиа-функций, они определены в скобках, и можно протестировать широкий спектр функций. Некоторые из самых популярных функцийширина,высота,соотношение сторон,ориентацияиразрешающая способность. Многие из этих популярных функций являются функциями диапазона, поэтому они также имеютминиМаксимумдоступная версия (например:минимальная ширина,Максимальная ширина,минимальное соотношение сторон,максимальное соотношение сторон,…)

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

 

body {
  background: hotpink;
}
@media screen and (max-width: 650px) {
  body {
    background: rebeccapurple;
  }
}

 

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


Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:

 

@media print {
  /* styles for print media only */
}
@media (max-width: 65rem) {
  /* styles for any device that has a display width of 65rem or less */
}
@media screen and (min-width: 800px) {
  /* styles for screen viewports that have a width of 800px or more */
}

 

Несколько медиа-функций

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

 

/* Extra-small */
@media screen and (max-width: 360px) {
  /* ... */
}
/* Small */
@media screen and (min-width: 361px) and (max-width: 480px) {
  /* ... */
}
/* Medium-only */
@media screen and (min-width: 481px) and (max-width: 960px) {
  /* ... */
}
/* ... */

 

Или логический оператор с использованием запятых

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

В следующем примере медиа-запрос будет истинным, если устройство имеет ориентациюпортретили если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:

 

@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) {
  /* ... */
}

 

Не логический оператор

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

 

@media not screen and (hover: hover) {
  /* ... */
}

 

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

Только логический оператор

The ТолькоЛогический оператор немного особенный и скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают единственное ключевое слово, поэтому весь медиа-запрос игнорируется. В противном случаеТольконе влияет:

 

@media only all and (min-width: 320px) and (max-width: 480px) {
  /* ignored by older browsers */
}

 

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

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

В последнем выпуске спецификации медиа-запроса (уровень 4) указано довольно много новых медиа-функций, которые можно протестировать:

  • указатель: если есть основное указывающее устройство (никто,грубыйилиотлично).
  • любой указатель: если есть какое-либо указывающее устройство (никто,грубыйилиотлично).
  • парить: Может ли основное указывающее устройство наводиться на элементы (никтоилипарить).
  • любое наведение: Может ли какое-либо из доступных указывающих устройств наводиться на элементы (никтоилипарить).
  • цветовая гамма: диапазон доступных цветов (srgb,р3илиrec2020).
  • переполнение-встроенный: как обрабатывается потенциальное переполнение на встроенной оси (никто,выгружается,необязательный постраничныйилипрокрутить).
  • блок переполнения: Как обрабатывается потенциальное переполнение на оси блока (никто,выгружается,необязательный постраничныйилипрокрутить).
  • Обновить: С какой периодичностью можно обновлять раскладку (никто,медленныйилибыстро).

Медиа-запросы для дисплеев Retina

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

Мы можем выполнить это с помощьюмин-разрешениемультимедийная функция со значением 192 dpi. Однако функция разрешения не обязательно поддерживается во всех браузерах, и для более надежного подхода мы также можем добавить дополнительный нестандартный-webkit-min-device-pixel-ratioфункция со значением 2:

 

@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
    /* ... */
}

 

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