Дизайнеры могут корректировать свои проекты под нужды пользователей. Ярчайшим примером этого является форм-фактор пользовательского устройства; его ширина, соотношение сторон устройства и т. д. Используя медиа-запросы, дизайнеры могут реагировать на эти различные форм-факторы.
Медиа-запросы инициируются с помощью ключевого слова @media
(правило CSS) и могут использоваться в различных случаях.
Ориентируйтесь на различные типы результатов
Веб-сайты часто отображаются на экранах, но CSS также можно использовать для стилизации веб-сайтов и для других результатов. Возможно, вы захотите, чтобы ваши веб-страницы выглядели на экране одинаково, а при распечатке — по-другому. Запрос типов мультимедиа делает это возможным.
В этом примере цвет фона установлен серый. Но если страница распечатана, цвет фона должен быть прозрачным. Это экономит чернила принтера пользователя.
body {
color: black;
background-color: grey;
}
@media print {
body {
background-color: transparent;
}
}
Вы можете использовать at-правило @media
в своей таблице стилей следующим образом или создать отдельную таблицу стилей и использовать атрибут media
в элементе link
:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">
Если вы не укажете какой-либо тип мультимедиа для своего CSS, он автоматически будет иметь значение типа мультимедиа, равное all
. Эти два блока CSS эквивалентны:
body {
color: black;
background-color: white;
}
@media all {
body {
color: black;
background-color: white;
}
}
Эти две строки HTML также эквивалентны:
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="global.css" media="all">
Условия запроса
Вы можете добавлять условия к типам мультимедиа. Это так называемые медиа-запросы. CSS применяется только в том случае, если тип носителя соответствует и условие также истинно. Эти условия называются медиа-функциями .
Это синтаксис медиа-запросов:
@media type and (feature)
Вы можете использовать медиа-запросы к элементу link
, если ваши стили находятся в отдельной таблице стилей:
<link rel="stylesheet" href="specific.css" media="type and (feature)">
Допустим, вы хотите применить разные стили в зависимости от того, находится ли окно браузера в ландшафтном режиме (ширина области просмотра больше его высоты) или в портретном режиме (высота области просмотра больше его ширины). Есть медиа-функция под названием orientation
которую вы можете использовать, чтобы проверить это:
@media all and (orientation: landscape) {
// Styles for landscape mode.
}
@media all and (orientation: portrait) {
// Styles for portrait mode.
}
Или, если вы предпочитаете иметь отдельные таблицы стилей:
<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">
В этом случае тип носителя — all
. Поскольку это значение по умолчанию, вы можете оставить его, если хотите:
@media (orientation: landscape) {
// Styles for landscape mode.
}
@media (orientation: portrait) {
// Styles for portrait mode.
}
Или используя отдельные таблицы стилей:
<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">
Хотя использование отдельных таблиц стилей для разных типов мультимедиа (например, print
) может быть приемлемым, вероятно, не стоит использовать отдельную таблицу стилей для каждого медиа- запроса . Вместо этого используйте at-правила @media
.
Настройка стилей в зависимости от размера области просмотра
Для адаптивного дизайна одна из наиболее полезных медиа-функций связана с размерами области просмотра браузера. Чтобы применить стили, когда ширина окна браузера превышает определенную ширину, используйте min-width
.
@media (min-width: 400px) {
// Styles for viewports wider than 400 pixels.
}
Используйте функцию мультимедиа max-width
, чтобы применять стили ниже определенной ширины:
@media (max-width: 400px) {
// Styles for viewports narrower than 400 pixels.
}
Вы можете использовать любые единицы длины CSS в своих медиа-запросах. Если ваш контент в основном основан на изображениях, пиксели могут иметь наибольший смысл. Если ваш контент в основном основан на тексте, вероятно, имеет смысл использовать относительную единицу измерения , основанную на размере текста, например em
или ch
:
@media (min-width: 25em) {
// Styles for viewports wider than 25em.
}
Вы также можете комбинировать медиа-запросы, чтобы применить более одного условия. Используйте слово and
для объединения медиа-запросов:
@media (min-width: 50em) and (max-width: 60em) {
// Styles for viewports wider than 50em and narrower than 60em.
}
Выбирайте точки останова в зависимости от контента
Точка, в которой условие медиа-функции становится истинным, называется точкой останова. Лучше всего выбирать точки останова на основе вашего контента, а не популярных размеров устройств, поскольку они могут меняться с каждым циклом выпуска технологии.
В этом примере 50em
— это точка, в которой строки текста становятся неудобно длинными. Таким образом, точка останова создается, чтобы сделать интерфейс более разборчивым. Используя свойство column-count
, с этого момента текст делится на два столбца.
@media (min-width: 50em) {
article {
column-count: 2;
}
}
Комбинации
Вы можете использовать медиа-запросы на основе высоты области просмотра, а не только ширины. Это может быть полезно для оптимизации содержимого интерфейса «над сгибом». В предыдущем примере, если читатели используют широкое, но короткое окно браузера, им придется прокрутить один столбец вниз, а затем прокрутить обратно вверх, чтобы добраться до начала второго столбца. Было бы безопаснее применять столбцы только тогда, когда область просмотра достаточно широка и достаточно высока.
Вы можете комбинировать медиа-запросы, чтобы стили применялись только тогда, когда все условия выполняются. В этом примере область просмотра должна быть не менее 50em
в ширину и 30em
в высоту, чтобы можно было применить стили столбцов. Эти точки останова были выбраны в зависимости от количества контента.
@media (min-width: 50em) and (min-height: 30em) {
article {
column-count: 2;
}
}
Эти примеры показывают, как медиа-запросы можно использовать для адаптации дизайна к форм-фактору пользовательского устройства, но это лишь поверхностное представление о возможностях. Медиа-запросы могут выходить далеко за рамки ширины и высоты, получая доступ к пользовательским настройкам специальных возможностей и цветам темы. Использование медиа-запросов для корректировки макета — отличное начало адаптивного дизайна, основанного на этих и многих других функциях.
Проверьте свое понимание
Проверьте свои знания об адаптивных медиа-запросах.
Медиа-запросы существуют только для размера экрана?
Экраны — единственное место, где потребляется или отображается веб-контент?
Тип носителя по умолчанию?
screen
landscape
all
some
none
Что бы вы использовали, чтобы браузер не масштабировал дизайн на мобильных устройствах?
width: 100%
font-size: 200%
<meta name="viewport" content="width=device-width, initial-scale=1">
Какой медиа-запрос применяется, когда размер окна браузера превышает 720px
.
@media (width: 720px)
@media (max-width: 720px)
@media (clamp-width: 720px)
@media (min-width: 720px)