Полезные функции CSS Media Query

Типичный медиа-запрос состоит из медиа-типа (screen, print, speech и т.д.) и одного или нескольких выражений, включающих медиа-функции, которые могут принимать значения true или false.

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


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

Вот несколько полезных медиа-функций, с которыми я столкнулся:

1. Соотношение сторон
Соотношение сторон - это отношение ширины к высоте области просмотра.

@media (aspect-ratio: 2/1) {
   ...
}
@media (min-aspect-ratio: 16/9) {
...
}
@media (max-aspect-ratio: 8/5) {
   ...
}

Вот практический пример использования соотношения сторон -

img {
   display: block;
   margin: auto;
   width: 100vw;
   height: calc((9/16)*100vw);
}
@media (min-aspect-ratio: 16/9) {
   img {
       height: 100vh;
       width: calc((16/9)*100vh);
   }
}

2. Ориентация
Есть два значения ориентации:

• portrait: область просмотра находится в книжной ориентации, то есть высота больше или равна ширине.
  
• landscape: область просмотра находится в альбомной ориентации, то есть ширина больше, чем высота.
  

@media (orientation: landscape) {
   ...
}
@media (orientation: portrait) {
   ...
}

Эта медиа функция помогает в адаптивном дизайне. Мы можем использовать его с другими медиа функциями, такими как width и height.

@media screen and (min-height: 640px) and (orientation: portrait) { 
   ...
}

3. Режим отображения (display-mode)
display-mode используется для проверки режима отображения приложения. Есть 4 типа в соответствии со спецификацией. Он является частью спецификации Web App Manifest.
Функциональный запрос будет применяться независимо от того, присутствует манифест веб-приложения или нет.

4. hover, any-hover and any-pointer
hover: CSS-элемент hover можно использовать для проверки того, может ли основной механизм ввода пользователя наводить курсор на элементы.

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

@media (hover: hover) {
 a:hover {
   background: blue;
 }
}

any-hover: проверяет, может ли любой доступный ввод зависать над элементами.

any-pointer: проверяет, есть ли у пользователя какое-либо указательное устройство (мышь, стилус), если да, то насколько оно точное
Точность определяется параметрами - fine, coarse, none

5. Width и Height
Это две часто используемые медиа-функции являются неотъемлемой частью отзывчивого Интернета.

@media (width: 360px) {
 body {
   ...
 }
}
@media (max-width: 768px) { 
 body {
  ...
}
@media (min-width: 992px) { 
 body {
   ...
 }
}
@media (height: 360px) {
 body {
   ...
 }
}
@media (min-height: 640px) {
 body {
   ...
 }
}
@media (max-height: 768px) {
 body {
   ...
 }
}

6. prefers-color-scheme
Данная функция была введена в "media queries level 5" но еще не реализована браузерами.

Она используется для определения того, запросил ли пользователь в своей системе тему светлого или темного цвета.

Ознакомится с другими функциями, представленными в media queries level 5.

В этой статье мы рассмотрели несколько полезных медиа-функций. Есть и другие, такие как resolution, update и т.д. Полный список можно найти на MDN.