Медиа-запросы - это способ настроить браузер по определенным характеристикам, функциям и предпочтениям пользователя, а затем применить стили или запустить другой код на основе этих параметров. Возможно, наиболее распространенными медиа-запросами в мире являются те, которые нацелены на определенные диапазоны области просмотра и применяют пользовательские стили, которые и породили всю идею адаптивного дизайна.
Есть много других вещей, на которые мы можем нацеливаться помимо ширины области просмотра. Это может быть разрешение экрана, ориентация устройства, предпочтения операционной системы или даже многое другое из множества вещей, которые мы можем запрашивать и использовать для стилизации контента.
Использование медиа-запросов
Медиа-запросы обычно связаны с CSS, но их также можно использовать в HTML и JavaScript.
HTML
Есть несколько способов использования медиа-запросов непосредственно в HTML.
Это <link>элемент, который идет прямо в документе <head>. В этом примере. мы говорим браузеру, что хотим использовать разные таблицы стилей с разными размерами области просмотра:
Почему вы хотите это сделать? Это может быть хорошим способом настроить производительность вашего сайта, разделив стили таким образом, чтобы они загружались и обслуживались устройствами, которым они нужны.
Но для ясности: это не всегда предотвращает загрузку таблиц стилей, которые не соответствуют этим медиа-запросам, а просто назначает им низкий уровень приоритета загрузки. Таким образом, если устройство с маленьким экраном, например телефон, посещает сайт, оно будет загружать только те таблицы стилей в медиа-запросах, которые соответствуют размеру его области просмотра. Но если появится экран рабочего стола большего размера, он загрузит всю группу, потому что она соответствует всем этим запросам (ну, за вычетом запроса печати в этом конкретном примере).
Это просто <link>стихия. Как объясняется в нашем руководстве по адаптивным изображениям , мы можем использовать медиа-запросы к <source>элементу, которые информируют <picture>элемент, какую версию изображения следует использовать браузеру из набора параметров изображения.
Опять же, это может быть хорошим выигрышем в производительности, потому что мы можем передавать изображения меньшего размера на устройства меньшего размера, которые предположительно (но не всегда) будут маломощными устройствами, которые могут быть ограничены тарифным планом.
И давайте не будем забывать, что мы также можем использовать медиа-запросы непосредственно к <style>элементу:
CSS
JavaScript
Анатомия медиа-запроса
Теперь, когда мы уже видели несколько примеров того , где запросы средств массовой информации могут быть использованы, давайте выберем их друг от друга и посмотреть , что они на самом деле делают.
@СМИ
Типы медиа
Особенности СМИ
Операторы
Вам действительно нужны медиа-запросы?
Media Queries - это мощный инструмент в вашем наборе инструментов CSS с захватывающими скрытыми жемчужинами. Но если вы приспособите свой дизайн к каждой возможной ситуации, вы получите кодовую базу, которую слишком сложно поддерживать, и, как мы все знаем, CSS похож на медвежонка: милый и безобидный, но когда он вырастет, он сожрет вас заживо.
Вот почему я рекомендую следовать концепции универсального дизайна Ранальда Мейса, которая заключается в « разработке продуктов, которые будут использоваться всеми людьми в максимально возможной степени, без необходимости адаптации или специального дизайна».
О доступности для всех Лаура Калбаг объясняет, что разница между доступным и универсальным дизайном тонкая, но важная. Доступный дизайнер создал бы большую дверь для людей в инвалидном кресле, а универсальный дизайнер создал бы вход, который подошел бы любому, независимо от его способностей.
Я знаю, что говорить об универсальном дизайне в Интернете сложно и почти звучит утопично, но подумайте: существует около 150 различных браузеров , около 50 различных комбинаций пользовательских предпочтений и, как мы уже упоминали ранее, более 24000 различных и уникальных устройств Android. в одиночестве. Это означает, что существует не менее 18 миллионов возможных случаев, в которых может отображаться ваш контент. По словам фантастической Мириам Сюзанн, «CSS здесь пытается создать графический дизайн неизвестного контента на бесконечном и неизвестном холсте, в операционных системах, интерфейсах и языках. Ни у кого из нас нет возможности узнать, что мы делаем ».
Вот почему предполагать действительно опасно, поэтому, когда вы проектируете, разрабатываете и думаете о своих продуктах, оставьте предположения и используйте медиа-запросы, чтобы убедиться, что ваш контент отображается правильно при любом контакте и перед любым пользователем.
Использование min-и max-для сопоставления диапазонов значений
Многие из средств массовой информации функций , приведенные в предыдущем разделе , - в том числе width, height, colorи color-index- может быть с префиксом min-или max-выразить минимальные или максимальные ограничения. Мы уже видели, как они используются во многих примерах, но дело в том, что мы можем создать диапазон значений для сопоставления вместо того, чтобы объявлять конкретные значения.
В следующем фрагменте мы закрашиваем фон тела в фиолетовый цвет, когда ширина области просмотра шире 30 мкм и уже 80 мкм. Если ширина области просмотра не совпадает с этим диапазоном значений, то она вернется к белому цвету.
Media Queries Level 4 определяет новый и более простой синтаксис с использованием операторов меньше ( <), больше ( >) и равно ( =). К сожалению, на момент написания он поддерживается только FireFox.
Вложенность и принятие сложных решений
CSS позволяет вкладывать at-правила или группировать операторы с помощьюкруглых скобок, что позволяет нам углубиться в оценку сложных операций.
