Медиа-запросы и другие устройства — CSS: Адаптивность сайта

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

В стандарте CSS3 определены 4 основных типа устройств, которые возможно указать в качестве условия медиа-запроса:

all — все доступные устройства. Этот тип используется по умолчанию, поэтому указывать его не обязательно.
print — принтеры. Эти стили используются при печати веб-страницы. Отдельный CSS для печати очень востребован при создании интернет-магазинов, так как пользователи зачастую распечатывают страницу с нужным им товаром.
screen — все экраны различных устройств. Сюда входят как дисплеи холодильников, так и 4К-мониторы.
speech — скринридеры. Это программное обеспечение для чтения текста, помогающие незрячим людям воспринимать информацию на странице.

<style>
  /* Стили сайта */

  @media print {
    /* Стили для вывода страницы на печать */
  }

  @media speech {
    /* Стили для скринридеров */
  }
</style>

Так же, как и с остальными медиа-запросами, тип устройства можно указывать при подключении CSS-файла:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подключение CSS-файлов</title>

    <!-- Общие стили для проекта -->
    <link rel="stylesheet" href="style.css">

    <!-- Стили вывода страницы на печать -->
    <link rel="stylesheet" media="print" href="print.css">

</head>
<body>
    <!-- Разметка проекта -->
</body>
</html>

Помимо указания конкретного типа устройства, CSS позволяет указывать и особые характеристики устройства, для которого необходимо применить стили. Основными характеристиками, которые поддерживают большинство браузеров, являются:

color. Количество бит цвета, которое способно воспроизвести устройство. Если значение не указано, то проверяется, что устройство может воспроизводить цвет.
monochrome. Монохромность устройства. Устройство является монохромным, если может воспроизводить только два основных цвета — чёрный и белый, а также их оттенки. Такими устройствами являются некоторые электронные книги.
orientation. Ориентация устройства. Подробнее эта характеристика была рассмотрена в прошлом уроке.
aspect-ratio. Характеристика, показывающая соотношение сторон viewport. Например 16/9 или 4/3. Если разрешение viewport равняется 1280x720, то aspect-ratio может принимать любые кратные этому разрешению числа, чтобы применились стили для данного разрешения. Например, можно указать 16/9, 32/18, 1280/720 и даже 2560/1440.

Соотношения сторон экрана

<style>
  /* Стили сайта */

  @media (color) {
    /* Стили для цветных устройств */
  }

  @media (aspect-ratio: 16/9) {
    /* Стили страницы с соотношением 16 к 9 */
  }
</style>

Самостоятельная работа

Создайте любую страницу на компьютере и попробуйте добавить все характеристики в условие медиа-запроса так, чтобы стили сработали на вашем компьютере.

Дополнительные материалы

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ

130

курсов

1000

упражнений

2000+

часов теории

3200

тестов