Медиа-запросы CSS3

Медиа-запросы разделяются в зависимости от пользовательского устройства, и в настоящее время поддерживаются два типа запросов — «screen» и «print«. Медиа-запросы обеспечивают расширяемость функционала сайтов и веб-приложений, позволяя задавать более четкое определение стилей.

Что такое медиа-запрос?

Медиа-запрос — это способ контролировать представление контента. Он состоит из типа и минимум одного выражения, которое проверяет выполнение условий для указанных характеристик устройства.

Как уже было сказано, в настоящее время широко реализована поддержка двух типов: «screen» и «print«.

При наличии условных выражений контент может выводиться по-разному для различных типов устройств, без ущерба для содержимого.

Как определить медиа-запрос?

Простой медиа-запрос может быть определен в HTML следующим образом:

<link rel="stylesheet" media="print" href="myexample.css" />

В приведенном выше примере, мы указали, что для типа медиа «print» браузер пользователя должен использовать таблицу стилей myexample.css.

То же самое может быть объявлено как @import-правило в CSS:

@import url(myexample.css) print;

Когда браузер пользователя обрабатывает приведенный выше медиа-запрос, он определяет, текущий тип медиа — print или нет. Если да, то будет применяться таблица стилей «myexample.css«. Следовательно, вывод медиа-запросов можно организовать в зависимости от выполняемых условий.

Если тип устройств не задан или задано значение ‘all‘, то стили будут применяться для всех типов медиа.

Например:

<link rel="stylesheet" href="myexample.css" />
<link rel="stylesheet" media="all" href="myexample.css" />

В приведенном выше примере, стили будет применяться как для типа ‘print‘, так и для типа ‘screen‘. Это эквивалентные объявления. Как и следующий CSS-код:

@media all { … }
@media { … }

Медиа-запросы могут быть объединены в сложные медиа-запросы:

<link rel="stylesheet" media="print, projection" href="myexample.css" />

Этот запрос также может быть объявлен следующим образом:

@media print, projection { … }

Медиа-запросы также поддерживают логическое выражение NOT, используя ключевое слово «NOT«:

<link rel="stylesheet" media="not print, screen" href="myexample.css" />

В приведенном выше примере мы указали, что стили не будут применяться к типу ‘print‘, а только к типу ‘screen‘.

Характеристики устройств, которые можно указать в медиа-запросах

  • color;
  • color-index;
  • device-aspect-ratio;
  • device-height;
  • device-width;
  • grid;
  • height;
  • monochrome;
  • resolution;
  • scan;
  • width.

Завершение

Из этой статьи вы узнали о медиа-запросах CSS3. Я надеюсь, что вы нашли эту информацию полезной для себя.

Перевод статьи «Understanding CSS3 Media Queries» был подготовлен дружной командой проекта Сайтостроение от А до Я.