Все устройства
Устройства с тактильной обратной связью
Брайлевсике принтеры
Портативные устройства
Принтеры
Проекторы
Цветные экраны
Речевые синтезаторы
Моноширинная символьная среда
Соотношение сторон области просмотра
@media (aspect-ratio: 16/9) {}
Количество бит на цвет
Количесвто записей в таблице подстановки цветов
Соотношение сторон экрана
Ширина, высота экрана
Устройство с фиксированным размером символов
Высота области просмотра
Функция позволяет браузеру узнать, может ли основной механизм ввода наводиться на элементы (например, как курсор мыши).
hover - может наводиться на элементы
none - не может наводиться на элементы или механизма ввода с возможностью наведения нет вообще
@media screen and (hover: hover) {}
inverted - применить стили, если цвета инвертированы
none - применить стили по умолчанию
@media screen and (inverted-colors: inverted) {}
Минимальное, максимальное соотношение сторон
@media screen and (max-width: 960px){}
/* Desktops 1281px или больше */
@media (min-width: 1281px) {}
/* Laptops, Desktops между 1025px и 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {}
/* Tablets, Ipads (portrait) между 768px и 1024px */
@media (min-width: 768px) and (max-width: 1024px) {}
/* Tablets, Ipads (landscape) между 768px и 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {}
/* Low Resolution Tablets, Mobiles (Landscape) между 481px и 767px */
@media (min-width: 481px) and (max-width: 767px) {}
/* Most of the Smartphones Mobiles (Portrait) между 320px и 479px */
@media (min-width: 320px) and (max-width: 480px) {}
Сколько бит на каждый пиксель
Ориентация экрана
landscape - альбом, ширина области видимости больше высоты
portrait - портрет, высота области видимости больше ширины
@media screen and (orientation: landscape) {}
Функции позволяют браузеру узнать, имеет ли основной механизм ввода указатель (например, мышь) и если имеет, то насколько он точный.
coarse - включает в себя указательно ограниченной точности
fine - включает в себя точное указатель
none - не включает в себя указатель
Предпочтительная цветовая схема
light - применить стили, если пользователь предпочитает светлую тему
dark - применить стили, если пользователь предпочитает тёмную тему
no-preference - применить стили по умолчанию
@media screen and (prefers-color-scheme: dark) {}
Сокращение количества анимации
reduce - применяет стили, если пользователь не хочет видеть анимации и переходы
no-preference - применяет обычные стили
@media screen and (prefers-reduced-motion: reduce) {}
Разрешение экрана или печати
Тип развертки
Ширина области просмотра