CSS: Адаптивность сайта
2026-02-26 17:26 Diff

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

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

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

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

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

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

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