Правило @media CSS

Это правило @media можно использовать для определения правил стилей для различных типов средств в одной таблице стилей. За ним должно следовать список типов средств, разделенных запятыми, и блок правил.

Используя правило @media, вы можете определить различные стили для различных типов средств.

@media может устанавливать различные стили для различных размеров экрана, особенно если вам нужно настроить адаптивный дизайн страницы, @media очень полезен.

Когда вы изменяете размер браузера, страница также будет перерисовываться в зависимости от ширины и высоты браузера.

Использование грамматики CSS @media

Грамматика правила такая:

@media media type,... {
　　　　/* media-specific rules */
}

Вы также можете использовать различные CSS стили для различных сред:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

Следующий пример демонстрирует, как использовать атрибут @media.

@media screen{
body　{
color: #32cd32;
		　　font-family: Arial, sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height: 1.2;
}
}

Типы СМИ

Медиа-функция

Совместимость браузеров

Свойство @media совместимость браузеров, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это правило.

Дополнительное чтение

Узнайте больше из следующих руководств:CSS Media Types.