Медиа-запросы 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. Я надеюсь, что вы нашли эту информацию полезной для себя.