Медиа-запросы дают нам очень мощный способ настроить наши стили в соответствии с такими факторами, как тип используемого устройства, размер окна просмотра, плотность пикселей на экране или даже ориентация устройства. Поскольку медиа-запросы существуют уже довольно давно, вы, возможно, уже знакомы с основным синтаксисом и использованием. Таким образом, этот пост призван стать хорошим кратким ориентиром, и, надеюсь, вы также откроете для себя несколько трюков, о которых вы не знали.
Основные медиа-запросы
Медиа-запросы определяются с помощью @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) {
/* ... */
}
Вы можете отслеживать текущую поддержку браузера дляразрешающая способностьмедиа-функция на Могу ли я использовать.