Правило @media
, представленное в CSS2, позволило определить разные правила стиля для разных типов мультимедиа.
Примеры. У вас может быть один набор правил стиля для экранов компьютеров, другой для принтеры, один для портативных устройств, один для телевизионных устройств и так далее.
К сожалению, эти типы мультимедиа никогда не получали широкой поддержки со стороны устройств, других чем тип печатного носителя.
Медиа-запросы в CSS3 расширили идею медиа-типов CSS2: вместо поиска типа устройства они смотрят на возможности устройство.
Медиа-запросы можно использовать для проверки многих вещей, таких как:
ширина и высота области просмотра
ширина и высота устройства
ориентация (планшет/телефон находится в альбомном или портретном режиме?)
разрешение
Использование медиа-запросов — популярный метод создания индивидуального стиля. лист на настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает правило @media
.
Property | |||||
---|---|---|---|---|---|
@media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Медиа-запрос состоит из медиа-типа и может содержать один или несколько выражения, которые принимают либо истинное, либо ложное значение.
@media not|only mediatype and (expressions) {
CSS-Code;
}
Результат запроса true, если указанный тип носителя соответствует типу устройства, на котором находится документ отображается, и все выражения в медиа-запросе верны. Когда медиа-запрос верен, соответствующая таблица стилей или правила стиля применяется в соответствии с обычными правилами каскадирования.
Если вы не используете операторы not или only, тип носителя является необязательным, а Тип all
будет подразумеваться.
Вы также можете иметь разные таблицы стилей для разных носителей:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Используется для всех устройств типа носителя
Используется для принтеров
Используется для экранов компьютеров, планшетов, смартфонов и т. д.
Используется для программ чтения с экрана, которые «читают» страницу вслух.
Один из способов использования медиа-запросов — создать альтернативный раздел CSS прямо внутри таблицы стилей.
В следующем примере цвет фона меняется на светло-зеленый, если Область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше 480 пикселей, цвет фона будет розовый):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
В следующем примере показано меню, которое появится слева от страницы, если область просмотра имеет ширину 480 пикселей или шире (если область просмотра меньше 480 пикселей, меню будет поверх контента):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Дополнительные примеры медиазапросов можно найти на следующей странице: Примеры CSS MQ.
Полный обзор всех типов мультимедиа и функций/выражений см. Правило @media в нашей ссылке на CSS.