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

Обзор всех способов, с помощью которых мультимедийные функции позволяют вам реагировать на устройства и предпочтения.

Адаптивный дизайн был бы невозможен без медиа-запросов. До появления медиа-запросов не было возможности узнать, какое устройство люди использовали для посещения вашего сайта. Конструкторам пришлось строить предположения. Эти предположения были закодированы в проекты фиксированной ширины или гибкие макеты.

Все изменилось с появлением медиа-запросов . Впервые дизайнеры смогли пойти навстречу людям. Дизайнеры могли корректировать свои макеты в соответствии с устройствами людей.

Помните, что медиа-запрос включает в себя необязательный тип мультимедиа и обязательную функцию мультимедиа. За прошедшие годы особых изменений в типах средств массовой информации не произошло. Возможных значений по-прежнему всего четыре:

@media all
@media screen
@media print
@media speech

Медиа-возможности , с другой стороны, значительно расширились. Теперь дизайнеры могут идти навстречу пользователям, адаптируя дизайн под гораздо больше, чем просто размер экрана.

Размеры видового экрана

Безусловно, самые популярные медиа-запросы в Интернете связаны с шириной области просмотра. Но даже здесь вам предоставляется выбор. Вы можете использовать функцию мультимедиа max-width , чтобы применять стили ниже определенной ширины, или функцию мультимедиа min-width , чтобы применять стили выше определенной ширины.

main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 45em) {
  main {
    display: block;
  }
}

@media (min-width: 45em) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

Лично мне нравится использовать min-width . Я применяю стили макета аддитивным способом. Я ввожу новые правила компоновки в каждой точке останова вместо того, чтобы отменять предыдущие правила.

Этот аддитивный подход также работает для высоты. Используя min-height вы можете ввести больше правил по мере того, как станет доступна большая высота области просмотра. Например, у вас может быть элемент заголовка, который вы хотите привязать к верхней части окна браузера, если там достаточно места по вертикали.

@media (min-height: 30em) {
  header {
    position: fixed;
  }
}

Но вы можете использовать функцию мультимедиа max-height если хотите. Здесь заголовок по умолчанию закреплен, но привязка удаляется, если недостаточно места по вертикали.

header {
  position: fixed;
}
@media (max-height: 30em) {
  header {
    position: static;
  }
}

Выбор между префиксами min- и max- касается не только width и height . Мультимедийная функция aspect-ratio предлагает тот же выбор. Он также предлагает версию без префиксов, если вы хотите применить стили с точным соотношением ширины к высоте.

@media (min-aspect-ratio: 16/9) {
  // The ratio of width to height is at least 16 by 9.
}
@media (max-aspect-ratio: 16/9) {
  // The ratio of width to height is less than 16 by 9.
}
@media (aspect-ratio: 16/9) {
  // The ratio of width to height is exactly 16 by 9.
}

Предоставление разных стилей для разных соотношений сторон может быстро выйти из-под контроля. Если вам не нужен такой детальный уровень контроля, функция orientation мультимедиа может лучше соответствовать вашим потребностям. Имеет два возможных значения: portrait или landscape .

@media (orientation: portrait) {
  // The width is less than the height.
}
@media (orientation: landscape) {
  // The width is greater than the height.
}

Несмотря на то, что термины «портрет» и «альбом» чаще всего используются для обозначения ориентации мобильных устройств, функция orientation мультимедиа не зависит от конкретного устройства. Полноэкранное окно браузера на обычном ноутбуке будет иметь значение orientation landscape .

Дисплеи

Разные дисплеи имеют разную плотность пикселей, измеряемую в dpi на дюйм. Вы можете настроить свои стили для различной плотности пикселей, используя функцию resolution мультимедиа. Как и aspect-ratio , resolution бывает трех видов: минимальное, максимальное и точное.

@media (min-resolution: 300dpi) {
  // The display has a pixel density of at least 300 dots per inch.
}
@media (max-resolution: 300dpi) {
  // The display has a pixel density less than 300 dots per inch.
}
@media (resolution: 300dpi) {
  // The display has a pixel density of exactly 300 dots per inch.
}

Возможно, вам никогда не придется использовать какие-либо медиа-запросы resolution . Плотность пикселей обычно является проблемой только для изображений, а адаптивные изображения — это способ решения проблемы плотности пикселей непосредственно в HTML.

С другой стороны, CSS — это место, где вы определяете анимацию и переходы. Вы можете настроить эти анимации и переходы так, чтобы они реагировали на различную частоту обновления, используя функцию update мультимедиа. Эта медиа-функция сообщает одно из трех значений: none , slow и fast .

Значение update none означает отсутствие частоты обновления. Например, напечатанную страницу невозможно обновить.

Значение update « slow означает, что дисплей не может обновляться быстро. Дисплей с электронными чернилами — один из примеров экрана с низкой частотой обновления.

Значение update fast означает, что дисплей обновляется достаточно быстро, чтобы обрабатывать анимацию и переходы.

@media (update: fast) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Не все аспекты дисплея связаны с возможностями оборудования. В модуле по темированию вы видели, как определять свойства в файле манифеста веб-приложения . Одно из этих свойств называется display , и вы можете присвоить ему значение fullscreen , standalone , minimum-ui или browser . Соответствующая мультимедийная функция display-mode позволяет адаптировать стили для этих различных параметров.

Допустим, вы указали значение display standalone в манифесте веб-приложения. Если кто-то добавит ваш сайт на свой главный экран, он запустится без какого-либо интерфейса браузера. Вы можете решить отобразить кнопку «Назад» для этих пользователей.

button.back {
  display: none;
}
@media (display-mode: standalone) {
  button.back {
     display: inline;
  }
}

Цвет

Существует множество мультимедийных функций для запроса цветовых возможностей устройства. Если вы хотите настроить стили для любого дисплея, который выводит только оттенки серого, вы можете использовать функцию monochrome мультимедиа без какого-либо значения.

@media (monochrome) {
  body {
    color: black;
    background-color: white;
  }
}

Есть соответствующая функция color мультимедиа.

@media (color) {
  body {
    color: maroon;
    background-color: linen;
  }
}

Для цветных экранов вы можете писать запросы с функциями мультимедиа color-gamut , color-index или dynamic-range . Все они сообщают конкретные подробности о цветовых возможностях экрана.

В этом примере значения цвета обновляются в ответ на функцию мультимедиа dynamic-range , которая сообщает комбинацию максимальной яркости, глубины цвета и коэффициента контрастности дисплея. Возможные значения: standard или high . Экрану высокой четкости, который сообщает о high значении dynamic-range предоставляется другое цветовое пространство с помощью новой функции CSS color() .

.neon-red {
  color: hsl(355 100% 95%);
}
@media (dynamic-range: high) {
  .neon-red {
    color: color(display-p3 1 0 0);
  }
}

Взаимодействие

Медиа-функции также могут сообщать о типе механизма ввода, используемого для взаимодействия с вашим сайтом: hover , any-hover , pointer и any-pointer . Подробности смотрите в модуле по взаимодействию .

Предпочтения

Существует ряд медиа-запросов, которые позволяют реагировать на предпочтения пользователя: prefers-color-scheme , prefers-contrast и prefers-reduced-motion . Более подробную информацию см. в модулях по тематике и доступности .

Вы можете комбинировать медиа-функции в одном медиа-запросе. Вы можете ограничить стили анимации так, чтобы они применялись только в том случае, если устройство имеет высокую частоту обновления и пользователь не выразил предпочтения уменьшению движения.

@media (update: fast) and (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
  a:hover {
    transform: scale(150%);
  }
}

Больше медиа-функций

На подходе еще больше медиа-функций.

Медиа-функции forced-colors и inverted-colors сообщают, использует ли устройство ограниченную или инвертированную цветовую палитру.

Функция scripting мультимедиа позволит вам настроить CSS в зависимости от наличия JavaScript.

Медиа-функция под названием prefers-reduced-data позволит пользователям указать, что они используют лимитное соединение, чтобы вы могли отправлять меньшие или меньшие ресурсы.

Остальные предложения пока формулируются. В следующем и последнем модуле вы узнаете о предложении по мультимедийной функции, которая обрабатывает различные конфигурации экрана.

Проверьте свое понимание

Проверьте свои знания о функциях мультимедиа