Полное руководство по медиа-запросам CSS
Соц сети
Разработка мобильных приложений

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

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

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

Использование медиа-запросов

Медиа-запросы обычно связаны с CSS, но их также можно использовать в HTML и JavaScript.

 HTML

Есть несколько способов использования медиа-запросов непосредственно в HTML.

Это <link>элемент, который идет прямо в документе <head>В этом примере. мы говорим браузеру, что хотим использовать разные таблицы стилей с разными размерами области просмотра:

<html>
  <head>
    <!-- Served to all users -->
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Served to screens that are at least 20em wide -->
    <link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
    <!-- Served to screens that are at least 64em wide -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
    <!-- Served to screens that are at least 90em wide -->
    <link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
    <!-- Served to screens that are at least 120em wide -->
    <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
    <!-- Served to print media, like printers -->
    <link rel="stylesheet" href="print.css" media="print" />
  </head>
  <!-- ... -->
</html>

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

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

Это просто <link>стихия. Как объясняется в нашем руководстве по адаптивным изображениям , мы можем использовать медиа-запросы к  <source>элементу, которые информируют <picture>элемент, какую версию изображения следует использовать браузеру из набора параметров изображения.

<picture>
  <!-- Use this image if the screen is at least 800px wide -->
  <source srcset="cat-landscape.png" media="(min-width: 800px)">
  <!-- Use this image if the screen is at least 600px wide -->
  <source srcset="cat-cropped.png" media="(min-width: 600px)">

  <!-- Use this image if nothing matches -->
  <img src="cat.png" alt="A calico cat with dark aviator sunglasses.">
</picture>

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

И давайте не будем забывать, что мы также можем использовать медиа-запросы непосредственно к <style>элементу:

<style>
  p {
    background-color: blue;
    color: white;
  }
</style>

<style media="all and (max-width: 500px)">
  p {
    background-color: yellow;
    color: blue;
  }
</style>
 CSS
 JavaScript

Анатомия медиа-запроса

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

 @СМИ
 Типы медиа
 Особенности СМИ
 Операторы

Вам действительно нужны медиа-запросы?

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

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

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

Я знаю, что говорить об универсальном дизайне в Интернете сложно и почти звучит утопично, но подумайте: существует около 150 различных браузеров , около 50 различных комбинаций пользовательских предпочтений и, как мы уже упоминали ранее, более 24000 различных и уникальных устройств Android. в одиночестве. Это означает, что существует не менее 18 миллионов возможных случаев, в которых может отображаться ваш контент. По словам фантастической Мириам Сюзанн, «CSS здесь пытается создать графический дизайн неизвестного контента на бесконечном и неизвестном холсте, в операционных системах, интерфейсах и языках. Ни у кого из нас нет возможности узнать, что мы делаем ».

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

Использование min-и max-для сопоставления диапазонов значений

Многие из средств массовой информации функций , приведенные в предыдущем разделе , - в том числе width,  heightcolorи color-index- может быть с префиксом min-или max-выразить минимальные или максимальные ограничения. Мы уже видели, как они используются во многих примерах, но дело в том, что мы можем создать диапазон значений для сопоставления вместо того, чтобы объявлять конкретные значения.

В следующем фрагменте мы закрашиваем фон тела в фиолетовый цвет, когда ширина области просмотра шире 30 мкм и уже 80 мкм. Если ширина области просмотра не совпадает с этим диапазоном значений, то она вернется к белому цвету.

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Media Queries Level 4 определяет новый и более простой синтаксис с использованием операторов меньше ( <), больше ( >) и равно ( =). К сожалению, на момент написания он поддерживается только FireFox.


Вложенность и принятие сложных решений

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


@media (min-width: 20em), not all and (min-height: 40em) { @media not all and (pointer: none) { ... } @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... } }


Замечание о контейнерных запросах

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



 

Примеры

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

Настройте макет при разной ширине окна просмотра

 Больше информации

Темный режим

 Больше информации

Определение ориентации, наведения и движения в отзывчивой галерее карточек

 Больше информации

Ориентируйтесь на iPhone в ландшафтном режиме

/* iPhone X Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  /* Styles! */
}
 Больше информации

Примените липкий заголовок для больших видовых экранов

 Больше информации

Адаптивная (плавная) типографика

 Больше информации

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

 Больше информации


На нашем сайте Вы можете заказать разработку мобильного приложения для бизнеса по Казахстану, а наши специалисты компании NEXT IN всегда готовы проконсультировать Вас и помочь в создании эффективного приложения для Вашего бизнеса.