Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Медиазапросы и другие устройства 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 и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

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

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

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

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»