Дизайнеры могут корректировать свои проекты под нужды пользователей. Ярчайшим примером этого является форм-фактор пользовательского устройства; его ширина, соотношение сторон устройства и т. д. Используя медиа-запросы, дизайнеры могут реагировать на эти различные форм-факторы.
Медиа-запросы инициируются с помощью ключевого слова @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;
}
}
Эти примеры показывают, как медиа-запросы можно использовать для адаптации дизайна к форм-фактору пользовательского устройства, но это лишь поверхностное представление о возможностях. Медиа-запросы могут выходить далеко за рамки ширины и высоты, получая доступ к пользовательским настройкам специальных возможностей и цветам темы. Использование медиа-запросов для корректировки макета — отличное начало адаптивного дизайна, основанного на этих и многих других функциях.
Проверьте свое понимание
Проверьте свои знания об адаптивных медиа-запросах.
Медиа-запросы существуют только для размера экрана?
Экраны — единственное место, где потребляется или отображается веб-контент?
Тип носителя по умолчанию?
screenscreen не является типом по умолчанию.nonenone не является допустимым типом носителя.allsomesome не является допустимым типом носителя.landscapelandscape не является допустимым типом носителя.Что бы вы использовали, чтобы браузер не масштабировал дизайн на мобильных устройствах?
width: 100%font-size: 200%<meta name="viewport" content="width=device-width, initial-scale=1"> Какой медиа-запрос применяется, когда размер окна браузера превышает 720px .
@media (width: 720px)720px .@media (max-width: 720px)720px .@media (min-width: 720px)720px .@media (clamp-width: 720px)clamp-width не является допустимым условием функции медиа-запроса.