Медиазапросы CSS.

  Медиазапросы CSS хотя и могут формировать CSS-правила, вообще говоря, не являются селекторами CSS. Медиазапросы CSS позволяют разбить таблицу стилей CSS на отдельные блоки.
   Стили каждого блока таблицы стилей, выделенного медиазапросом CSS, будут применяться браузером на основании условия (запроса медиа-среды) установленного этим медиазапросом CSS.
   Основой для медиазапросов CSS стал атрибут MEDIA тега LINK, допустимыми значениями которого первоначально были значения вида устройства отображения.
  Изначально технология медиазапросов предназначалась для создания Web-страниц, которые могли подстраиваться под устройство отображения, на котором эти Web-страницы отображались в текущий момент.
  Появление технологии медиазапросов CSS в принципе было связано с появлением мобильных устройств с небольшими (как по размерам, так и по характеристикам) экранами. Разные логические блоки стилей, выделенных медиазапросаии CSS, предназначались для разных устройств отображения.

  Однако, разработчики и производители браузеров быстро вошли во вкус, и появились медиазапросы, которые устанавливают различные стили Web-страницы и при отображении на одном и том же устройстве. Например в зависимости от скроллинга, изменения цветовой схемы рабочего стола, или операционной системы.

  Такая тенденция наверное означает, что у технологии медиазапросов может быть большое будущее. Но в этом справочнике отражен лишь принцип технологии медиазапросов CSS и основной (изначальный) функционал.

  На медиазапросы CSS распространяется правило каскадности.
          Медиазапрос


Формат записи в коде CSS:

  • @media Запрос {Таблица стилей}

Значения формата записи:

  • @media - Ключевое слово.

  • Запрос - Запрос медиа-среды  ⃰.
      Устанавливает условие, при выполнении (истинности) которого браузер должен использовать выделенную запросом - таблицу стилей.

  • { - Ключевое слово.

  • Таблица стилей - Устанавливает таблицу стилей CSS, которую браузер должен использовать при истинности условия, которое задал запрос.
      Таблица стилей медиазапроса кодируется в её обычном виде и формирует CSS-правила.

  • } - Ключевое слово.
   ⃰ Запрос медиа-среды.
  Запрос медиа-среды является выражением с конечным логическим значением.
  Это выражение создаётся с помощью трех типов ключевых слов:

        - Логические операторы;
        - Вид устройства отображения;
        - Характеристика устройства, или среды отображения;
  1. Логические операторы
    • and - Логическое умножение (и).
        Оператор and разбивает весь запрос или его подвыражения, выделенные операторами ( и ), на отдельные подвыражения.
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения оператора and всегда вычисляются перед вычислением всего разбитого им запроса или подвыражения.
        Истинность только всех подвыражений полученных оператором and приводит к истинности разбитого им запроса или подвыражения.
    • not - Логическая инверсия (не).
        Оператор not предназначен для логической инверсии всего запроса или его подвыражения, следующего за оператором not.
        Если запрос или подвыражение следующ(ий/ее) за оператором not разбит(о) на подвыражения операторами and, то сначала выполняются операторы and.
        Если запрос или подвыражение следующ(ий/ее) за оператором not разбит(о) на подвыражения операторами ,, то сначала выполняется оператор not для каждого подвыражения.
    • , - Логическое сложение (или).
        Оператор , разбивает весь запрос или его подвыражения, выделенные операторами ( и ), на отдельные подзапросы.
        Каждый такой подзапрос также является выражением с конечным логическим значением.
        Все подзапросы оператора , всегда вычисляются перед вычислением всего разбитого им запроса или подвыражения.
        Истинность хотя бы одного подзапроса полученного оператором , приводит к истинности разбитого им запроса или подвыражения.
    • ( - Оператор группировки.
        Оператор ( используется только в паре с оператором ).
        Вместе выделяют подвыражение в запросе или в любом его подвыражении (в том числе выделенном операторами ( и )).
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения выделенные операторами ( и ) всегда вычисляются перед вычислением содержащего их запроса или подвыражения.
    • ) - Оператор группировки.
        Оператор ) используется только в паре с оператором (.
        Вместе выделяют подвыражение в запросе или в любом его подвыражении (в том числе выделенном операторами ( и )).
        Подвыражение также является выражением с конечным логическим значением.
        Все подвыражения выделенные операторами ( и ) всегда вычисляются перед вычислением содержащего их запроса или подвыражения.
    • : - Оператор сравнения.
        Оператор :, вместе со сравниваемым параметром (обычно характеристикой устройства, или среды отображения) и значением для сравнения, выделяют подвыражение в запросе.
        Подвыражение также является выражением с конечным логическим значением. Все подвыражения оператора : всегда вычисляются перед вычислением всего запроса.
  2. Вид устройства отображения.
    • all - Все устройства.

      • Значение:

        • Содержит значение в самом себе.
            Всегда имеет значение TRUE (истина).

    • braille - Устройства, основанные на системе Брайля, предназначенные для слепых людей.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как устройство, основанные на системе Брайля, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • handheld - Наладонники, смартфоны, устройства с малой шириной экрана.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как наладонник или смартфон, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • print - Печатающее устройство вроде принтера.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения раcпознано как печатающее устройство, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • screen - Экран монитора.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как обычный монитор, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • speech - Речевые синтезаторы, а также программы для воспроизведения текста вслух (сюда же входят речевые браузеры).

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как речевой синтезатор, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • projection - Проектор.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано проектор, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • tty - Телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана (для них не должны использоваться пикселы в качестве единиц измерения).

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как устройство с ограниченными возможностями экрана, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • tv - Телевизор.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения распознано как телевизор, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

  3. Характеристика устройства, или среды отображения
    • aspect-ratio - Требуемое точное соотношение сторон области отображения (окна).

      • Значение:

        • CSS значение ratio. Выражение с оператором сравнения будет иметь значение TRUE (истина), если соотношение сторон области отображения равно этому значению, в противном случае - FALSE (ложь).
            Пример выражения - (aspect-ratio: 16/9).

    • min-aspect-ratio - Требуемое рамочное соотношение сторон области отображения (окна).

      • Значение:

        • CSS значение ratio. Выражение с оператором сравнения будет иметь значение TRUE (истина), если соотношение сторон области отображения равно или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-aspect-ratio: 16/9).

    • mах-aspect-ratio - Требуемое рамочное соотношение сторон области отображения (окна).

      • Значение:

        • CSS значение ratio. Выражение с оператором сравнения будет иметь значение TRUE (истина), если соотношение сторон области отображения равно или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (mах-aspect-ratio: 16/9).

    • color - Устройство цветного отображения.

      • Значение:

        • Содержит значение в самом себе. Выражение без оператора сравнения будет иметь значение TRUE (истина), если устройство отображения цветное, в противном случае - FALSE (ложь).
            Пример выражения - (color).

    • min-color - Устройство цветного отображения с требуемым разрешением бит на компонент цвета (глубиной).

      • Значение:

        • Минимальное число бит на компонент цвета для всех цветовых каналов. Выражение с оператором сравнения будет иметь значение TRUE (истина), если глубина всех базовых цветов устройства отображения равна или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-color: 3).

    • mах-color - Устройство цветного отображения с требуемым разрешением бит на компонент цвета (глубиной).

      • Значение:

        • Максимальное число бит на компонент цвета для всех цветовых каналов. Выражение с оператором сравнения будет иметь значение TRUE (истина), если глубина всех базовых цветов устройства отображения равна или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-color: 3).

    • color-index - Устройство цветного отображения, использующее таблицу индексированных цветов.

      • Значение:

        • Содержит значение в самом себе.
            Если устройство отображения использует таблицу индексированных цветов, то имеет значение TRUE (истина), в противном случае - FALSE (ложь).

    • min-color-index - Устройство цветного отображения с требуемым количеством цветов в таблице индексированных цветов (количество цветов, которое поддерживает устройство).

      • Значение:

        • Минимальное число цветов, которое поддерживает устройство.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если количество цветов, поддерживаемых устройством отображения, равно или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-color-index: 256).

    • mах-color-index - Устройство цветного отображения с требуемым количеством цветов в таблице индексированных цветов (количество цветов, которое поддерживает устройство).

      • Значение:

        • Максимальное число цветов, которое поддерживает устройство.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если количество цветов, поддерживаемых устройством отображения, равно или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (mах-color-index: 256).

    • display-mode - Режим отображения Web-страницы.

      • Значения:

        • browser - Отображение в окне (или вкладке) браузера.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если Web-страница отображается в окне или вкладке браузера, в противном случае - FALSE (ложь).
            Пример выражения - (display-mode: browser).
        • fullscreen - Полноэкранный режим.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если Web-страница отображается в полноэкранном режиме, в противном случае - FALSE (ложь).
            Пример выражения - (display-mode: fullscreen).

    • grid - Устройство отображения с фиксированным размером символов.

      • Значение:

        • Содержит значение в самом себе.
            Выражение без оператора сравнения будет иметь значение TRUE (истина), если устройство отображения обеспечивает только фиксированный размер символов, в противном случае - FALSE (ложь).
            Пример выражения - (grid).

    • height - Высота области отображения (окна).

      • Значение:

        • Точное значение высоты с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если высота области отображения равна этому значению, в противном случае - FALSE (ложь).
            Пример выражения - (height: 500px).

    • min-height - Требуемая рамочная высота области отображения (окна).

      • Значение:

        • Минимальное значение высоты с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если высота области отображения равна или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-height: 500px).

    • mах-height - Требуемая рамочная высота области отображения (окна).

      • Значение:

        • Максимальное значение высоты с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если высота области отображения равна или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (mах-height: 500px).

    • monochrome - Устройство монохромного отображения.

      • Значение:

        • Содержит значение в самом себе.
            Выражение без оператора сравнения будет иметь значение TRUE (истина), если устройство отображения не поддерживает цвета, в противном случае - FALSE (ложь).
            Пример выражения - (monochrome).

    • min-monochrome - Устройство монохромного отображения с требуемым разрешением бит на пиксель (глубиной).

      • Значение:

        • Минимальное число бит на пиксель.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если разрешение устройства равно или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-monochrome: 8).

    • mах-monochrome - Устройство монохромного отображения с требуемым разрешением бит на на пиксель (глубиной).

      • Значение:

        • Максимальное число бит на пиксель.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если разрешение устройства равно или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-monochrome: 8).

    • orientation - Ориентация области просмотра.

      • Значения:

        • landscape - Горизонтальный размер больше вертикального.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если горизонтальный размер области просмотра больше вертикального, в противном случае - FALSE (ложь).
            Пример выражения - (orientation: landscape).
        • portrait - Вертикальный размер больше горизонтального.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если вертикальный размер области просмотра больше горизонтального, в противном случае - FALSE (ложь).
            Пример выражения - (orientation: portrait).

    • resolution - Требуемое разрешение устройства отображения.

      • Значение:

        • Точное значение разрешения с обозначением dpi (точки на дюйм) или dpcm (точки на сантиметр).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если разрешение устройства отображения будет равно этому значению, в противном случае - FALSE (ложь).
            Пример выражения - (resolution: 300dpi).

    • min-resolution - Требуемое рамочное разрешение устройства отображения.

      • Значение:

        • Минимальное значение разрешения с обозначением dpi (точки на дюйм) или dpcm (точки на сантиметр).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если разрешение устройства отображения будет равно или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-resolution: 300dpi).

    • mах-resolution - Требуемое рамочное разрешение устройства отображения.

      • Значение:

        • Максимальное значение разрешения с обозначением dpi (точки на дюйм) или dpcm (точки на сантиметр).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если разрешение устройства отображения будет равно или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (mах-resolution: 300dpi).

    • scan - Тип развертки устройства отображения.

      • Значения:

        • interlace - Чересстрочная развертка.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если устройство отображения имеет чересстрочную развертку кадра, в противном случае - FALSE (ложь).
            Пример выражения - (scan: interlace).
        • progressive - Прогрессивная развертка.
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если устройство отображения имеет прогрессивную развертку кадра, в противном случае - FALSE (ложь).
            Пример выражения - (scan: progressive).

    • width - Ширина области отображения (окна).

      • Значение:

        • Точное значение ширины с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если ширина области отображения равна этому значению, в противном случае - FALSE (ложь).
            Пример выражения - (width: 500px).

    • min-width - Требуемая рамочная ширина области отображения (окна).

      • Значение:

        • Минимальное значение ширины с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если ширина области отображения равна или больше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (min-width: 500px).

    • mах-width - Требуемая рамочная ширина области отображения (окна).

      • Значение:

        • Максимальное значение ширины с обозначением px (пиксели).
            Выражение с оператором сравнения будет иметь значение TRUE (истина), если ширина области отображения равна или меньше этого значения, в противном случае - FALSE (ложь).
            Пример выражения - (mах-width: 500px).

    • -moz-os-version - Версия операционной системы, в которой работает браузер (приводится как пример развития технологии медиазапросов).

      • Значения:

        • windows-xp - Выражение с оператором сравнения будет иметь значение TRUE (истина), если браузер работает в OC WINDOWS XP, в противном случае - FALSE (ложь).
            Пример выражения - (-moz-os-version: windows-xp).
        • windows-vista - Выражение с оператором сравнения будет иметь значение TRUE (истина), если браузер работает в OC WINDOWS Vista, в противном случае - FALSE (ложь).
            Пример выражения - (-moz-os-version: windows-vista).
        • windows-win7 - Выражение с оператором сравнения будет иметь значение TRUE (истина), если браузер работает в OC WINDOWS 7, в противном случае - FALSE (ложь).
            Пример выражения - (-moz-os-version: windows-win7).
        • windows-win8 - Выражение с оператором сравнения будет иметь значение TRUE (истина), если браузер работает в OC WINDOWS 8, в противном случае - FALSE (ложь).
            Пример выражения - (-moz-os-version: windows-win8).
        • windows-win10 - Выражение с оператором сравнения будет иметь значение TRUE (истина), если браузер работает в OC WINDOWS 10, в противном случае - FALSE (ложь).
            Пример выражения - (-moz-os-version: windows-win10).

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

Примеры:
Любое устройство с шириной области отображения не менее 700 пикселей в альбомной ориентации:

  @media (min-width: 700px) and (orientation: landscape)
    {
      #div1 {width: 700px; height: auto; float: left; overflow: auto; padding: 0px; margin: 0px }
      #div2 {width: 700px; height: 100px; float: left; overflow: auto; padding: 0px; margin: 0px }
    }

Любое устройство с шириной области отображения не менее 700 пикселей в альбомной ориентации:

  @media all and (min-width: 700px) and (orientation: landscape)
    {
      #div1 {width: 700px; height: auto; float: left; overflow: auto; padding: 0px; margin: 0px }
      #div2 {width: 700px; height: 100px; float: left; overflow: auto; padding: 0px; margin: 0px }
    }

Любое не монохромное устройство:

  @media not (all and (monochrome))
    {
      #div1 {background-color: #F5F5F5 }
      #div2 {background-color: #C5C5C5 }
    }

Любое не монохромное устройство:

  @media not all and (monochrome)
    {
      #div1 {background-color: #F5F5F5 }
      #div2 {background-color: #C5C5C5 }
    }

Любое не монохромное устройство:

  @media not (monochrome)
    {
      #div1 {background-color: #F5F5F5 }
      #div2 {background-color: #C5C5C5 }
    }

Любое устройство с шириной области отображения не менее 700 пикселей, или экран монитора:

  @media (min-width: 700px), screen
    {
      #div1 {width: 700px; height: auto; float: left; overflow: auto; padding: 0px; margin: 0px }
      #div2 {width: 700px; height: 100px; float: left; overflow: auto; padding: 0px; margin: 0px }
    }