Медиазапросы и другие устройства — 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.

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

device-aspect-ratio. Характеристика, похожая на aspect-ratio, но учитывающая не разрешение viewport, а разрешение самого устройства.

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

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

  @media (device-aspect-ratio: 16/9) {
    /* Стили для устройств с соотношением экрана 16 к 9 */
  }
</style>

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

Самостоятельное задание

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Статья «Как учиться и справляться с негативными мыслями»
Статья «Ловушки обучения»
Статья «Сложные простые задачи по программированию»
Урок «Как эффективно учиться на Хекслете»
Вебинар «Как самостоятельно учиться»

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

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

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

130

курсов

900

упражнений

2000+

часов теории

3200

тестов