Медиавыражения в CSS — это не только max-width | by Рома Зварич

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

Фактически, до этого я в основном использовал CSS медиавыражения, чтобы сделать макет отзывчивым, используя max-width и min-width.

Теперь я обнаружил, что CSS-медиавыражения — это не только max-width, а множество разных значений. И некоторые из них могут быть действительно полезны в повседневной жизни.

Итак, что же это за медиавыражения, о которых я говорю? Возможно, о некоторых вы уже слышали. Но я также выделил из них и несколько новых, применение которых может быть весьма полезным

Да, я говорю о width, height, min-width, min-height, max-width и max-height.

Нуждаются ли они в особом представлении? Я буду краток.
Эти медиа-функции используются для установки разных стилей для разных размеров экрана. Они очень полезны при разработке отзывчивой системы.

Поскольку функции width и height могут устанавливать стили только для точно заданного размера области видимости, более вероятно, что вы будете использовать префиксы max- и min-. Например, в следующем коде стили будут применяться, только если высота вьюпорт больше 320 пикселей.

/* Красный фон применится, только если высота вьюпорт больше 320 пикселей */
body {
background-color: #FFD23F; /* Желтый фон */
}
@media screen and (min-height: 320px) {
body {
background-color: #EE4266; /* Красный фон */
}
}

Но вы также можете смешивать эти функции для обработки диапазона размеров

/* Красный фон применится, если ширина области видимости от 320 до 600 пикселей */
body {
background-color: #FFD23F; /* Желтый фон */
}
@media screen and (min-width: 320px) and (max-width: 600px) {
body {
background-color: #EE4266; /* Красный фон */
}
}

Следующий пример демонстрирует, как можно использовать функцию max-width для изменения цвета фона в зависимости от ширины области видимости

body {
background-color: #0EAD69;
}
@media screen and (max-width: 1600px) {
body {
background-color: #3BCEAC;
}
}
@media screen and (max-width: 1280px) {
body {
background-color: #FFD23F;
}
}
@media screen and (max-width: 960px) {
body {
background-color: #EE4266;
}
}
@media screen and (max-width: 600px) {
body {
background-color: #540D6E;
}
}

Orientation — это хорошая медиа-функция, которая позволяет вам производить изменения в зависимости от ориентации дисплея. Она может иметь два значения: portrait (портрет) и landscape (пейзаж/альбом).

Но что браузер считает портретом, а что пейзажем? Значение портрета будет инициировать изменения каждый раз, когда высота области видимости больше ширины. Аналогично, если ширина больше высоты, вьюпорт будет считаться «альбомным».

Например, этот код даёт следующий результат:

/* Красный фон применяется только, если ориентация экрана альбомная */
body {
background-color: #FFD23F; /* Желтый фон */
}
@media screen and (orientation: landscape) {
body {
background-color: #EE4266; /* Красный фон */
}
}

Данная медиа-функция похожа на функцию ориентации, но является более точной. Вы можете установить правила для конкретного необходимого соотношения сторон. Например, можно установить разную разметку для телефонов с экранами 16/9 и 18/9.

Эта функция также может иметь префикс max- и min- для обработки диапазона экранов с разным соотношением сторон

Итак, я попробую объяснить эти медиа-функции как можно проще, ведь они достаточно полезны.

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

А теперь перейдем к тому, что же они делают?

Функция hover (и any-hover) позволяет браузеру узнать, может ли основной механизм ввода наводиться на элементы (например, как курсор мыши).

Вы можете использовать эту функцию для определения основного механизма ввода, который

• hover: hover, может наводиться на элементы
• hover: none, не может наводиться на элементы или механизма ввода с возможностью наведения нет вообще

Когда это стоит использовать? Например, когда вы хотите обрабатывать анимацию наведения на мобильных устройствах, где механизм ввода (палец) не может наводиться на элементы.

Функции pointer (и any-pointer) позволяют браузеру узнать, имеет ли основной механизм ввода указатель (например, мышь) и если имеет, то насколько он точный.

Вы можете использовать эту функцию для определения основного механизма ввода, который:

• pointer: coarse, включает в себя указательно ограниченной точности
• pointer: fine, включает в себя точное указатель
• pointer: none, не включает в себя указатель

Это полезно, например, для увеличения области нажатия на устройства с неточным указателем

Эй, это всё скучно. Где новые крутые функции, о которых упоминалось раньше?

Вот они!

Учтите, что следующие функции являются экспериментальными и в данный момент имеют очень ограниченную поддержку.

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

Зачем включать инвертирование системных цветов? Обычно это очень полезно, если хочется улучшить читаемость.

Также имейте в виду, что еще одной хорошей практикой является увеличение шрифта и уменьшение жирности, когда цвета инвертированы. Это именно то, что вы можете сделать с помощью медиавыражений.

У данной функции есть только два значения:

• inverted: применить стили, если цвета инвертированы
• none: применить стили по умолчанию

Вот пример! Когда цвета инвертируются, размер текста увеличивается

.text {
font-size: 24px;
}
@media screen and (inverted-colors: inverted) {
.text {
font-size: 36px;
}
}

Пожалуйста, обратите внимание, что в данный момент эта функция поддерживается только в Safari (на macOS и iOS). Всегда актуальный список поддерживаемых браузеров можно найти здесь

Это одна из моих любимых функций, и я надеюсь, что постепенно она станет популярной.

Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом Android Q.

Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах её также поддерживают все основные браузеры, кроме Opera. Всегда актуальный список поддерживаемых браузеров можно найти здесь

Значения для этой функции достаточно понятны интуитивно:

• light: применить стили, если пользователь предпочитает светлую тему
• dark: применить стили, если пользователь предпочитает тёмную тему
• no-preference: применить стили по умолчанию

Посмотреть, насколько крута эта функция, можно в примере ниже!

.appbar {
background-color: #EE4266;
}
.fab {
background-color: #424242;
}
@media screen and (prefers-color-scheme: dark) {
body {
background-color: #424242;
}
.appbar {
background-color: #212121;
}
h3 {
color: #fff;
}
.fab {
background-color: #EE4266;
}
}

Установка системной тёмной темы делает страницу также тёмной

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

В общем, на наиболее важных десктопных и мобильных операционных системах существует опция доступности, позволяющая решить эти проблемы путём уменьшения подвижности элементов.

Эта функция может иметь два значения:

• reduce: применяет стили, если пользователь не хочет видеть анимации и переходы. Это значение обычно используется для их отключения
• no-preference: применяет обычные стили

Проверьте эту функцию в примере ниже:

.pulse {
animation: pulse 2s infinite;
}
@media screen and (prefers-reduced-motion: reduce) {
.pulse {
animation: none;
}
}

Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов

Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь

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

Хотелось бы упомянуть еще о некоторые функциях, как например, light-level, которая может использоваться для проверки уровня окружающего освещения, но большинство недавно представленных функций медиавыражений всё еще не имеют поддержки ни одним из браузеров, так что… еще не пришло время.

Примеры кода
Вы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.

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

Обзор. Разметка · Bootstrap. Версия v4.0.0

Компоненты и опции для создания вашего проекта Bootstrap, включая контейнеры для упаковки, мощную сетчатую систему, гибкий медиа-объект и гибкие классы полезности.

Контейнеры

Это базовый элемент в Bootstrap и они необходимы при использовании нашей стандартной сеточной системы. Выбирайте отзывчивый, с фиксированной шириной (что значит, что его max-width изменяется на каждом брейкпойнте) или контейнер с плавающей шириной (width ==100% всегда).

Контейнеры могут иметь вложенные элементы, но в большинстве случаев можно обойтись без них.

<div>
  <!-- Content here -->
</div>

Используйте .container-fluid для создания контейнера полной ширины, занимающий 100% зоны просмотра.

<div>
  ...
</div> 

Отзывчивые брейкпойнты

Поскольку Bootstrap разработан как mobile-first, тут используются медиа-запросы @media для создания брейкпойнтов контента и интерфейсов. Эти брейкпойнты в основном сделаны на минимальных широтах зоны просмотра и позволяют масштабировать элементы по мере изменения размера зоны просмотра.

В исходниках Sass Bootstrap главным образом записаны следующие ранги @media (брейкпойнты) для разметки, сеточной системы и компонентов.

// Экстрамалые девайсы («телефоны», 
// Малые девайсы («ландшафтные телефоны», >= 576px)
@media (min-width: 576px) { ... }

// Средние девайсы («таблетки», >= 768px)
@media (min-width: 768px) { ... }

// Большие девайсы (десктопы, >= 992px)
@media (min-width: 992px) { ... }

// Экстрабольшие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }
 

Так как все эти параметры записаны в исходниках как Sass, все @media доступны через миксины:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
} 

По случаю можно использовать и другие размеры (max-width: 575px == «данный размер или меньше»):

// Экстрамалые девайсы («телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», @media (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», @media (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, @media (max-width: 1199.98px) { ... }

// Экстрабольшие девайсы (большие десктопы)
// Тут нет @media, т.к. такие брейпкойнты не имеют верхней границы по ширине width

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

Опять же, эти @media доступны через Sass миксины:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Также в наличии @media и миксины размеров экрана, использующие минимальные и максимальные ширины брейкпойнтов.

// Экстрамалые девайсы («портретные телефоны», @media (max-width: 575.98px) { ... }

// Малые девайсы («ландшафтные», >= 575px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Средние девайсы («таблетки», >= 768px) 
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Большие девайсы (большие десктопы, >= 992px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Большие девайсы (большие десктопы, >= 1200px)
@media (min-width: 1200px) { ... }

Эти @media также доступны из миксинов Sass:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

Также, @media могут занимать несколько значений ширин брейкпойнта:

// Пример
// Здесь стили применятся от средних девайсов до XL-девайсов
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Миксины Sass для захвата таких же параметров (выше) выглядели бы так:

@include media-breakpoint-between(md, xl) { ... }
 

Z-индекс

Несколько компонентов Bootstrap используют данный индекс z-index, т.е. свойство CSS, которое помогает контролировать расположение контента с помощью третьей оси. В Bootstrap используется «стандартный» Z-индекс, спроектированный для правильного расположения навигации, всплывающих подсказок, всплывающих окон и т.н. “modals” (pop-up окно наверху страницы).

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

Мы не советуем настраивать эти значения самому, т.к. если потребуется изменить одно, придется менять все.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Для того, чтобы эффективно обращаться с перекрывающимися границами внутри компонентов (например, кнопки и формы ввода в группах форм ввода), мы используем по умолчанию значения

Какой должен быть порядок следования @media queris при формате «Сначала десктоп»?

Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана, соответственно при разрешении 1920px сработают max-width(480px), max-width(800px) и так далее, вплоть до max-width(1920px).

Хотелось бы разобрать следующее высказывание:

Браузер высчитывает реальное значение min-width исходя из размеров окна браузера, а max-width — от разрешения экрана

@media (max-width: 900px)
@media (max-width: 800px)
@media (max-width: 700px)
@media (max-width: 600px)
и так далее, вплоть до самого меньшего разрешения окна.
 

Кстати в чем заключается разница между следующими запросами и какой из них лучше использовать?

@media (max-width: 900px){}
@media screen and (max-width: 900px){}
@media only screen and (max-width: 900px){}

Media min width and max width

Мне часто задают вопросы вроде: « Стоит ли использовать медиа-запросы (media queries) min-width или max width CSS ? Те, кто знаком с адаптивным дизайном, сочтут этот вопрос странным, так как знают, что все зависит от конкретного случая. Сегодня я рад поделиться с вами собственным мнением о том, что на самом деле означает «зависит от конкретного случая ».

Ориентир на настольные ПК и max-width

Большая часть разработчиков до сих пор ориентируется только на пользователей ПК. Часто осознание ситуации приходит, когда становится ясно, сколько сил было потрачено впустую на компоненты для ПК, которые все реже востребованы из-за растущего числа мобильных пользователей. При анализе стилей подобных сайтов чаще всего встречается CSS media max width .

Если дизайн разрабатывался в первую очередь под настольные ПК, значит весь CSS должен быть насыщен объемным кодом для других ключевых точек ( breakpoints ). Если определенная ширина, заданная для ПК, является точкой отсчета, и мы не станем изменять и переписывать наш CSS , то вполне логично будет поменять в базовых стилях значения ширины окна просмотра на те, которые мы собираемся применять к экранам меньшего размера.

Вот пример, которым я часто пользуюсь ( предполагая, что .related принимает форму боковой панели ):

Такой подход при использовании со множеством компонентов может существенно увеличить объем CSS завершенного проекта. Но так как блочные элементы по умолчанию занимают 100% ширины родительского элемента, то разумнее было бы прописать все следующим образом:

Здесь мы используем стандартное положение блочных элементов, и перекрываем их, когда это состояние требуется изменить. Чтобы лучше понять суть всего сказанного, нужно изучить рабочий код таких сайтов.

max-width вместо более подходящего решения

Есть несколько причин использования в CSS min width max width :

• Если вы получили дизайн только для настольной версии сайта. Если вы получили настольную версию дизайна и несколько дополнительных вариантов для мобильных устройств. В таких случаях можете использовать max-width , но только временно;
• Вы внедряете адаптивный дизайн в уже работающий сайт, и код его стилей нельзя изменять;
• Вы пытаетесь компенсировать отсутствие медиа-запросов, и пытаетесь реализовать это с помощью CSS вместо JavaScript .

Так что же лучше использовать?

Обращайте внимание на стандартный вариант отображения конкретного элемента. Если вам нужно переписывать стандартное состояние для меньших экранов, то используйте max-width . Если элемент можно использовать на меньших экранах и при стандартном состоянии, применяйте min-width только в тех случаях, когда элемент должен отличаться от стандартного состояния. И конечно же, я рекомендую вам позволить контенту определять, что и как должно происходить.

Таблицы – отличный пример использования CSS div max width для изменения стандартного состояния элемента, чтобы он лучше отображался на маленьких экранах. Представьте таблицу, контента в которой слишком много, чтобы отображать его полностью на маленьких устройствах. В таком случае мы можем применить следующий код:

Этот код позволит нам преобразовать каждую строку ( и ячейку ) в блок. В результате таблица может стать длинной по вертикали, но зачастую это меньшее из зол. Я имею в виду длинные таблицы, которые приходится прокручивать по горизонтали. В таких ситуациях лучше всего оставить таблицы без изменений, за исключением кода для тех браузеров, которые понимают медиа-запросы, и случаев, когда ширина экрана не превышает определенного значения ( 30em в нашем случае ).

Другие элементы, которые в стандартном состоянии отлично смотрятся на маленьких экранах, нужно изменять лишь по необходимости для экранов большего размера. В таких случаях и применяется min-width .

Вкратце: позвольте стандартному состоянию элементов помочь вам определить, какой медиа-запрос использовать.

Данная публикация представляет собой перевод статьи « Choosing between min-width and max-width media queries » , подготовленной дружной командой проекта Интернет-технологии.ру

Статья, в которой познакомимся с медиа запросами и научимся применять их для создания адаптивных сайтов. Рассмотрим основные конструкции media запросов для использования их в вёрстке страниц с использованием фреймворков Bootstrap 3 и Bootstrap 4.

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

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Поддержка браузерами CSS3 медиа запросов (media queries)

Медиа запросы предназначены для создания адаптивных дизайнов сайтов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер). Более подробно познакомиться с адаптивным дизайном можно в статье «Что такое адаптивная разметка».

Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение дизайнов адаптивных сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы. Более подробно разобраться, как работает метатег viewport можно в статье «Знакомство с meta viewport».

Подключение метатега viewport к странице в большинстве случаях осуществляется так:

Синтаксис медиа запросов

Для создания медиа запросов используется следующий синтаксис:

Основные типы устройств:

• all — все устройства (по умолчанию).
• print — принтеры и режим предварительного просмотра страницы перед печатью.
• screen — устройства с дисплеями.

• and — требует обязательного выполнения всех указанных условий.
  Например:Стили CSS в вышеприведённом примере выполняться только в том случае, если страница будет выводиться на устройство с экраном, иметь область просмотра более 1200 пикселей в ширину, а также находиться в альбомном режиме.
• , (запятая) — требует обязательного выполнения хотя бы одного из указанных условий в медиа запросе.Стили CSS в этом примере будут применяться к странице в двух случаях. Т.е. тогда, когда устройство будет иметь viewport не менее 544 пикселей (включительно) или ориентацию landscape.
• not — предназначен для отрицания указанного условия. Имеет по отношению к оператору and меньший приоритет, т.е. оператор not всегда выполняется после and .Стили CSS, находящиеся в этом правиле, будут применены к странице только в том случае, если устройство не является screen и не будет иметь портретную ориентацию. А также они (стили CSS) будут применены к элементам документа ещё тогда, когда устройство (браузер) будет иметь ширину рабочей области не менее 992 пикселя (включительно).
  Т.е. запрос в вышеприведённом примере будет обрабатываться так:

Медиа функции

Для составления условия в @media можно использовать следующие фукнции:

• width — указывает требования к ширине области просмотра устройства (браузера).
• min-width — задаёт минимальную ширину области viewport в px , em или других единицах.
• max-width — указывает на то, какой должна быть максимальная рабочая область устройства (браузера).
• height , min-height и max-height — задают требования аналогично вышеприведённым функциям, но в отношении высоты viewport.
• orientation — функция, которая проверяет то, в каком режиме ( portrait или landscape ) отображается страница.
  Пример, в котором в зависимости от ориентации экрана, отображается одна или другая картинка:
• aspect-ratio ( min-aspect-ratio , max-aspect-ratio ) — позволяют указать то, как ширина устройства должна относиться к высоте. В качестве значений допускается использовать только целые значения.
• resolution ( min-resolution , max-resolution ) — указывает разрешение (плотность пикселей) устройства вывода. В качестве единиц измерения разрешения используются следующие величины: dpi (количество точек на дюйм), dpcm (количество точек на сантиметр), dppx (количество точек на пиксель).

Использование медиа-запросов при подключении файлов CSS

Медиа запросы также можно применять в качестве значения атрибута media элемента link . Это позволит в зависимости от параметров устройства определить, какие файлы CSS необходимо подсоединить к странице, а какие нет. Обычно данный функционал используется тогда, когда к разным классам устройств необходимо применить различные стили CSS.

Кроме этого медиа запросы можно также использовать в правиле @import , которое предназначено для импортирования стилей из других файлов CSS в текущий.

Медиа запросы для Bootstrap 3

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width . Это заставит их работать только в указанном диапазоне.

Медиа запросы для Bootstrap 4

Синтаксис медиа-запросов для Bootstrap 4, которые можно использовать только в следующем порядке (последовательного увеличения минимальной ширины viewport):

Список media запросов для фреймворка Bootstrap 4, которые можно применять только в обратном порядке (в порядке убывания ширины области просмотра окна браузера):

Перечень медиа-запросов для Bootstrap 4, которые можно использовать в таблице стилей в любой последовательности:

Код JavaScript, учитывающий параметры устройств

Наиболее простой способ создания кода JavaScript, учитывающий параметры устройств (аналогично CSS медиа запросам), осуществляется с помощью метода matchMedia объекта window .

Осуществляется это следующим образом:

Например, эту возможность можно применить для асинхронной загрузки картинок в зависимости от того какой размер viewport имеет устройство (браузер).

Метод matchMedia не поддерживается Internet Explorer 9 и другими старыми браузерами. Для того чтобы обеспечить эту функциональность в старых браузерах можно воспользоваться методом mq библиотеки Modernizr.

Поддержка браузерами метода matchMedia (JavaScript) — ноябрь 2016

В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.

В HTML4 медиа-запрос записывался следующим образом:

Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:

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

Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.

Медиазапросы, характеристики устройств и разрешения экрана

• Содержание:
• 1. Что такое медиа-запрос
• 2. Логические операторы
• 3. Тип носителя
• 4. Характеристики носителя
• 5. Метатег viewport
• 6. На какие разрешения экрана нужно ориентироваться
• 7. Стратегии использования медиа-запросов

Поддержка браузерами

IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0

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

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

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

1) С помощью HTML:

2) С помощью правила @import внутри элемента

4) Внутри таблицы стилей style.css:

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

Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.

2. Логические операторы

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

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.

2.2. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or .

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

2.3. Оператор not

Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос

будет эквивалентен запросу

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

будет эквивалентен запросу

2.4. Оператор only

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.

4. Характеристики носителя

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

grid

—>

device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.

5. Метатег viewport

Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.

Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .

Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .

При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.

Рис. 2. Разница между width и device-width

6. На какие размеры экрана нужно ориентироваться

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

Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.

7. Стратегии использования медиа-запросов

Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.

Рекомендуем к прочтению

Медиа запросы для Bootstrap 3 — Блог

Медиа запросы (media queries) — это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.

Медиа запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются во всех современных браузерах (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).

Организация media queries в порядке возрастания классов устройств xs, sm, md и lg (по умолчанию):

/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */

/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (min-width: 768px) {
/* Стили для устройств с шириной viewport, находящейся в диапазоне 768px - 991px */
}

/* Устройства со средним экраном (ноутбуки и компьютеры, 992px и выше) */
@media (min-width: 992px) {
  /* Стили для устройств с шириной viewport, находящейся в диапазоне 992px - 1199px */
}

/* Устройства с большим экраном (компьютеры, 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для устройств с шириной viewport >1200px */
}

Вышеприведённые запросы необходимо использовать только в указанном порядке.

Для того чтобы media запросы можно было применять в какой угодной последовательности, их необходимо расширить включив в них дополнительно выражение max-width. Это заставит их работать только в указанном диапазоне.

@media (max-width: 767px) {
  /* стили для xs-устройств */
}
@media (min-width: 768px) and (max-width: 991px) {
  /* стили для sm-устройств */
}
@media (min-width: 991px) and (max-width: 1199px) {
  /* стили для md-устройств */
}
@media (min-width: 1200px) {
  /* стили для lg-устройств */
}

• 14 июля 2019 г.
• 2463 просмотра

диапазонов медиа-запросов ›zzzzBov.com

Спецификация Media Queries Level 4 представила новый синтаксис диапазона для медиа-запросов.

  @media (480 пикселей <= ширина <768 пикселей)  

Это особенно полезно, потому что медиа-запросы min- * и max- * всегда включают их граничные значения.

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

  @media (max-width: 768 пикселей) {
  .пример {
    отступ: 10 пикселей;
    ширина: 100%;
  }
}

@media (min-width: 768 пикселей) {
  .пример {
    // ах ах! Будут применяться и поля, и отступы.
    // когда ширина браузера ровно 768 пикселей 😱
    маржа: 15 пикселей;
    ширина: 200 пикселей;
  }
}  

Классическое решение - убедиться, что граничные значения отличаются на 1 пиксель.

  @media (макс. Ширина: 767 пикселей) {...}
@media (min-width: 768 пикселей) {...}  

Это отлично работает для единиц в пикселей , но может быть проблематичным для значений, использующих em .

  @media (max-width: 29em) {...}
@media (min-width: 30em) {...} // значительный промежуток  

Поскольку em единиц может быть изменено пользователем с помощью настроек размера шрифта браузера, я обычно использовал 0,001 в качестве значения "epsilon", чтобы убедиться, что значения em меньше 1px друг от друга, при этом все еще не вызывая перекрытия диапазона:

  @media (max-width: 29.999em) {...}
@media (минимальная ширина: 30 мкм) {...}  

Синтаксис диапазона для медиа-запросов упрощает это, разрешая как включающие, так и исключающие границы для минимальных- * и максимальных- * границ:

  @media (ширина <30em) {...}
@media (ширина <= 30em) {...}  

К сожалению, мультимедийные запросы диапазона в настоящее время почти не поддерживаются браузером.

К счастью, есть другой способ обработки исключительных границ в медиа-запросах, который поддерживает кроссбраузерность. Этот альтернативный метод включает две функции медиа-запросов.

Отрицательные медиа-запросы

Первая функция медиа-запроса, необходимая для обработки неперекрывающихся диапазонов медиа-запросов, - это оператор медиа-запроса , а не .

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

Оператор not отменяет весь медиа-запрос, к которому он применяется. Например, not screen и (min-width: 480px) соответствует неэкранным устройствам, ширина которых меньше 480 пикселей. Логику лучше выразить как not (screen and (min-width: 480px)) , хотя в противном случае это могло бы выглядеть как (not screen) и (min-width: 480px) .

Более того, оператор , а не применяется только к одному медиа-запросу, даже если в список медиа-запросов в объявлении @media включено несколько.

В качестве примера, @media not screen, (min-width: 480px) лучше представить как (not screen) или (min-width: 480px) , хотя может показаться, что его следует применять как нет (экран или (минимальная ширина: 480 пикселей) , учитывая, как не ведет себя с и .

Кроме того, для оператора , а не требуется избыточный и подробный тип носителя. Вместо возможности использовать @media not (min-width: 480px) вам нужно будет использовать @media not all и (min-width: 480px) .

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

...к исключительным границам max- * и min- * соответственно.

@media not all и (max-width: 30em) {...} и @media (max-width: 30em) {...} создают непрерывный диапазон с первым медиа-запросом, представляющим ширину на меньше чем 30em, и второй медиа-запрос, представляющий ширину больше или равную 30em.

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

Вложенные медиа-запросы

Вторая функция медиа-запросов, необходимая для обработки неперекрывающихся диапазонов медиа-запросов, - это вложение медиа-запросов.

При использовании вложенных медиа-запросов одно объявление @media может применяться со вторым объявлением @media , которое также применяется в первом. Поскольку это отдельные объявления, оператор , а не применяется только к одному, и они по-прежнему объединяются, как если бы они были объединены с и :

  @media screen {
  @media (min-width: 30em) {
    // это применимо только к экранам с шириной больше или равной 30em (480 пикселей)
  }
}  

Nesting имеет неплохую поддержку браузеров, за исключением IE11.На момент написания статьи осталось несколько месяцев до того, как Microsoft прекратит поддержку IE.

Теперь все вместе

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

Если мы хотим включить нижние границы, используйте min-width для обеих границ:

  @media (min-width: 30em) {
  @media not all и (min-width: 64em) {
    .пример { … }
  }
}  

Это эквивалент

  @media (30em <= width <64em) {
  .пример { … }
}  

Если мы хотим включить верхние границы, используйте max-width для обеих границ:

  @media not all and (max-width: 30em) {
  @media (max-width: 64em) {
    .пример { … }
  }
}  

Это эквивалент

  @media (30em  

tl; др:

Если вы боролись с перекрытием границ диапазонов медиа-запросов, вы можете начать использовать вложенные отрицательные медиа-запросы сегодня, используя шаблон

  @media (min-width: [нижняя граница]) {
  @media not all и (min-width: [верхняя граница]) {
    .пример { … }
  }
}  

  @media ([нижняя граница] <= ширина <[верхняя граница]) {
  .пример { … }
}  

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    ширина: 30em; / * Занимаем 30em родительского контейнера * /
}
  

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax e.t.c.
 * /
.selector {
    минимальная ширина: 30em; / * Занимаем не менее 30em родительского контейнера * /
}
  

  / **
 * Блок em может быть заменен другими блоками, такими как
 * px,%, vmin, vmax и т. д.
 * /
.selector {
    максимальная ширина: 30em; / * Занимает не более 30em родительского контейнера * /
}
  

  @media screen и (min-width: 48em) {/ * Обратите внимание на свойство min-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с как минимум
     * 48em. Предполагая, что размер шрифта по умолчанию составляет 16 пикселей,
     * это будет 48 * 16 = 768 пикселей. 768 пикселей - это минимум
     * ширина устройства iPad (по состоянию на август 2020 г.).
     * /
}
  

  @media screen и (max-width: 48em) {/ * Обратите внимание на свойство max-width * /
    / **
     * Блоки кода в этом медиа-запросе
     * будет работать только для устройств с не более
     * 48em, т.е. размер экрана 768 пикселей и ниже.
     * Предполагается, что размер шрифта по умолчанию составляет 16 пикселей.
     * /
}
  

  .image-selector {
    ширина: 100%;
}
  

  .image-selector {
    максимальная ширина: 100%; / * Никогда не превышайте родительский контейнер.* /
}
  

  @media (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media screen и (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}

  

  @media only screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media only screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media not screen and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media [screen | print | all] and (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media screen and (min-width: 992px) and (max-width: 1136px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media screen and (min-width: 992px), (max-width: 1136px) {
  тело {
    цвет фона: синий;
  }
}
  

  @media (max-width: 992px) {
  тело {
    цвет фона: синий;
  }
}
  

  / * начальный стиль * /
п {
    красный цвет;
}

/ * медиа-запрос * /
@media only screen и (max-width: 800px) {
  п {
    цвет: зеленый;
  }
}
  

  / * начальный стиль * /
п {
  красный цвет;
}

/ * медиа-запрос * /
@media only screen и (min-width: 400px) {
  п {
    цвет: зеленый;
  }
}
  

  / * начальный стиль * /
п {
  красный цвет;
}

/ * медиа-запрос * /
@media only screen и (min-width: 400px) и (max-width: 800px) {
   п {
     цвет: зеленый;
   }
}
  

  $ small: 600 пикселей;

.show-on-mobile {
  @include breakpoint (min-width $ small + 1) {
    дисплей: нет;
  }
}

.hide-on-mobile {
  @include breakpoint (max-width $ small) {
    дисплей: нет;
  }
}