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>

Рекомендуемые программы

Навигация по темеТеория

Завершено

0 / 7