Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО @MEDIA

Свойство @media используется в медиазапросах для применения разных стилей для разных типов устройств.

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


9+

Синтаксис

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
    ...
}

Типы медиа

Тип	Описание
all	Охватывает все устройства.
print	Предназначен для печатающих устройств.
screen	Предназначен для устройств с экранами (пк, планшеты, смартфоны).
speech	Предназначен для синтезаторов речи.

Медиа свойства

Имя	Описание
any-hover	Проверяет позволяет ли любой доступный элемент наводить на него курсор.
any-pointer	Проверяет есть ли у пользователя указательное уствройство (например, мышь), и если есть, то насколько оно точное.
aspect-ratio	Проверяет соотношение ширины и высоты окна просмотра.
color	Проверяет количеаство бит на компонент цвета.
color-gamut	Проверяет примерный диапазон цветов, которые поддерживаются пользовательским браузером и устройством.
color-index	Проверяет количество цветов, которое может отображать устройство.
height	Проверяет высоту окна просмотра.
hover	Проверяет может ли устройство пользователя наводить курсор на элементы.
inverted-colors	Проверяет инвертирует ли цвета браузер или ОС.
max-height	Проверяет меньше ли высота окна просмотра, чем значение указанное в свойсте.
max-width	Проверяет меньше ли ширина окна просмотра, чем значение указанное в свойсте.
min-height	Проверяет больше ли высота окна просмотра, чем значение указанное в свойсте.
min-width	Проверяет больше ли ширина окна просмотра, чем значение указанное в свойсте.
orientation	Проверяет ориентацию устройства.
overflow-block	Проверяет как устройство вывода обрабатывает содержимое, которое выходит за пределы области блока.
overflow-inline	Проверяет можно ли прокрутить содержимое, которое выходит за пределы области просмотра.
pointer	Проверяет является ли основной механизм ввода указательным устройством, и если да, то насколько он точен.
scripting	Проверяет доступен ли Javascript.
width	Проверяет ширину окна просмотра.

Песочница

<div class="item"></div>

HTML

@media (min-width:700px) {
    .item {
        background: blue
    }
}
   
@media (max-width:700px) {
    .item {
        background: green
    }
}
   
@media (max-width:500px) {
    .item {
        background: red
    }
}
   
.item {
    width: 250px;
    height: 250px;
}

CSS

← Перейти к списку свойств