Медиа-запросы CSS: основы работы
Медиа-запросы – это очень мощный способ настройки стилей в соответствии с такими факторами, как тип используемого устройства, размер области просмотра, плотность пикселей на экране и даже ориентация устройства. Поскольку медиа-запросы существуют уже довольно давно, вы, вероятно, уже знакомы с их основным синтаксисом и использованием. Поэтому в данном мануале мы постараемся кратко и понятно объяснить основы их работы, а также покажем несколько трюков, о которых вы не знали.
Основные медиа-запросы
Медиа-запросы определяются с помощью правила @media, за которым указывается тип и функции медиа. Доступные типы медиа: all, print, screen и speech (если тип не указан, по умолчанию подразумевается all). Одновременно можно использовать несколько типов, в таком случае их разделяют запятыми:
Примечание: Такие типы медиа, как tv или projection, устарели с выходом Media Queries level 4.
Что касается медиа-функций, они определяются в скобках. Вы можете протестировать широкий спектр функций. Некоторые из наиболее популярных — это width, height, aspect-ratio, orientation и resolution. Многие из этих популярных функций являются функциями диапазона, поэтому они также имеют минимальную и максимальную версии (то есть min-width, max-width, min-aspect-ratio, max-aspect-ratio и т.п.)
В следующем простом примере цвет фона по умолчанию — ярко-розовый, но экранные устройства с шириной области просмотра 650 пикселей или меньше вместо него будут отображать цвет rebeccapurple:
Обратите внимание, при указании типа и функции медиа между ними нужно использовать логический оператор and.
Вот еще несколько примеров простых медиа-запросов, которые указывают либо тип медиа, либо медиа-функцию, либо и то, и другое:
Несколько медиа-функций
Вы можете указать несколько медиа-функций, если того требует ваш запрос. Для этого между функциями используется логический оператор and. При использовании and запрос будет выполнен только в том случае, если все функции оцениваются как истинные. Например, очень часто макеты настраиваются на несколько разных диапазонов ширины области просмотра:
Логический оператор or и запятые
Также можно определить несколько запросов и разделить их запятыми. В этом случае запятые действуют как логические операторы or, и запрос становится по сути списком запросов. Медиа-запрос будет применяться, если какой-либо из перечисленных запросов отвечает шаблону.
В следующем примере медиа-запрос будет истинным, если устройство имеет портретную ориентацию или если окно просмотра устройства имеет минимальную ширину 3rem и максимальное соотношение сторон 2/1:
Логический оператор not
Вы можете использовать логический оператор not в начале запроса, чтобы изменить истинность всего запроса. Оператор not полезен для применения стилей, когда определенные условия не выполняются браузером или устройством. В следующем примере медиа-запрос будет применяться, когда основное указывающее устройство не может наводить курсор на элементы:
Примечание: Тип медиа нужно указывать обязательно. Кроме того, not меняет не весь список запросов (запросы, разделенные запятыми), а только один запрос.
Логический оператор only
Логический оператор only особенный – он скрывает весь запрос для старых браузеров. Другими словами, старые браузеры не понимают ключевое слово only, поэтому игнорируют весь медиа-запрос. Иначе ключевое слово only не действует.
Примечание: Как и в случае с оператором not, при использовании only тип носителя является обязательным. Обратите внимание, что устаревшие браузеры, которые не поддерживают Media Queries level 3, сейчас встречаются редко, поэтому в большинстве случаев only можно не использовать.
Дополнения из Media Queries Level 4
В последнем выпуске спецификации Media Queries Level 4 появилось довольно много новых медиа-функций, которые можно протестировать:
- pointer: определяет, есть ли у вас первичное указывающее устройство (none, coarse и fine).
- any-pointer: определяет, доступно ли какое-либо указывающее устройство (none, coarse и fine).
- hover: определяет, может ли основное указывающее устройство наводить курсор на элементы (none или hover).
- any-hover: определяет, может ли любое из доступных указывающих устройств наводиться на элементы (none или hover).
- color-gamut: диапазон доступных цветов (srgb, p3 или rec2020).
- overflow-inline: способ обработки потенциального переполнения на внутренней оси (none, paged, optional-paged или scroll).
- overflow-block: способ обработки потенциального переполнения на оси блока (none, paged, optional-paged или scroll).
- update: частота, с которой может обновляться макет (none, slow или fast).
Медиа-запросы для дисплеев Retina
За последние несколько лет наблюдается распространение устройств с дисплеями с более высокой плотностью пикселей. Определенные аспекты дизайна для устройств с более высокой плотностью пикселей можно определять иначе. К примеру, можно использовать определенную графику с высоким разрешением.
Чтобы добиться этого, используют медиа-функцию с минимальным разрешением со значением 192 dpi. Однако функция resolution поддерживается не всеми браузерами, и для более надежного подхода можно также добавить дополнительную нестандартную функцию -webkit-min-device-pixel-ratio со значением 2:
Проверить поддержку медиа-функции в браузерах можно на Can I Use.
Ниже вы найдете несколько очень полезных ресурсов, связанных с медиа-запросами:
Медиавыражения в CSS — это не только max-width
Недавно мы опубликовали новый веб-сайт нашей компании Mabiloft с полностью переработанным чистым дизайном и множеством новых великолепных иллюстраций и анимаций.
После того, как наш дизайнер проделал потрясающую работу, продумав и нарисовав сайт, нам, разработчикам, было необходимо реализовать макет, сохранив его чистым и цельным для каждого устройства, от большого 2K экрана, на которых мы пишем код, до старого iPhone 4 с его 3.5-дюймовым дисплеем.
Несколько недель спустя веб-сайт был почти готов и я просматривал его, чтобы убедиться, что всё работает как нужно. Заметив, что макет главной страницы неправильно отображался на нашем iPad, я быстро изменил некоторые CSS-правила и исправил ошибку, но… это привело к проблемам отображения макета на всех всех ноутбуках с небольшим экраном
Разыскивая решение сложившейся проблемы, я обнаружил, что мог бы сделать оба макета идеальными, используя только 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 пикселей.
Но вы также можете смешивать эти функции для обработки диапазона размеров
Следующий пример демонстрирует, как можно использовать функцию max-width для изменения цвета фона в зависимости от ширины области видимости
Ориентация экрана
/>
Orientation – это хорошая медиа-функция, которая позволяет вам производить изменения в зависимости от ориентации дисплея. Она может иметь два значения: portrait (портрет) и landscape (пейзаж/альбом).
Но что браузер считает портретом, а что пейзажем? Значение портрета будет инициировать изменения каждый раз, когда высота области видимости больше ширины. Аналогично, если ширина больше высоты, вьюпорт будет считаться «альбомным».
Например, этот код даёт следующий результат:
Соотношение сторон
Данная медиа-функция похожа на функцию ориентации, но является более точной. Вы можете установить правила для конкретного необходимого соотношения сторон. Например, можно установить разную разметку для телефонов с экранами 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: применить стили по умолчанию
Вот пример! Когда цвета инвертируются, размер текста увеличивается
Пожалуйста, обратите внимание, что в данный момент эта функция поддерживается только в Safari (на macOS и iOS). Всегда актуальный список поддерживаемых браузеров можно найти здесь
Предпочитаемая цветовая схема
Это одна из моих любимых функций, и я надеюсь, что постепенно она станет популярной.
Функция позволяет разработчикам устанавливать различные варианты оформления для элементов, если изменяется цветовая схема. И Windows и macOS позволяет пользователям менять системную цветовую схему со светлой на тёмную и обратно. iOS 13 также представила эту функцию, а для пользователей Android эта возможность станет доступной с приходом Android Q.
Поддержка браузерами также приличная. На данный момент последние версии Google Chrome, Mozilla Firefox и Safari поддерживают эту функцию. На мобильных устройствах её также поддерживают все основные браузеры, кроме Opera. Всегда актуальный список поддерживаемых браузеров можно найти здесь
- light: применить стили, если пользователь предпочитает светлую тему
- dark: применить стили, если пользователь предпочитает тёмную тему
- no-preference: применить стили по умолчанию
Установка системной тёмной темы делает страницу также тёмной
Сокращение количества анимации
Это также очень важно. Лично я люблю анимации и переходы, и я думаю, что правильная анимация может действительно улучшить удобство взаимодействия с сайтом. Но не всем нравятся анимации и, что более важно, у некоторых людей могут быть вестибулярные расстройства, из-за которых может возникать укачивание и головокружение. Я нашел полезную статью, которая очень хорошо объясняет подобные явления.
В общем, на наиболее важных десктопных и мобильных операционных системах существует опция доступности, позволяющая решить эти проблемы путём уменьшения подвижности элементов.
- reduce: применяет стили, если пользователь не хочет видеть анимации и переходы. Это значение обычно используется для их отключения
- no-preference: применяет обычные стили
Проверьте эту функцию в примере ниже:
Анимация пульсации прекращается, когда пользователь выбирает снижения подвижности элементов
Браузерная совместимость для этой функции достаточно хорошая. В данный момент только Edge и IE не поддерживают её. Всегда актуальный список поддерживаемых браузеров можно найти здесь
Заключение
Для меня это был интересный эксперимент, я узнал о некоторых новых возможностях, которые я, вероятно, теперь буду использовать гораздо чаще.
Хотелось бы упомянуть еще о некоторые функциях, как например, light-level, которая может использоваться для проверки уровня окружающего освещения, но большинство недавно представленных функций медиавыражений всё еще не имеют поддержки ни одним из браузеров, так что… еще не пришло время.
Примеры кода
Вы можете ознакомиться с примерами кода здесь. Код находится в открытом доступе на Github.
Кто мы
Мы команда молодых разработчиков и дизайнеров, находящихся в Падуя, Италия. Мы разрабатываем мобильные приложения и веб-сайты и всегда готовы создавать что-то великое
CSS
Запросы мультимедиа
Медиа-запросы поддерживаются во всех современных браузерах, включая Chrome, Firefox, Opera и Internet Explorer 9 и выше.
Важно отметить, что функция orientation носителей не ограничивается мобильными устройствами. Он основан на ширине и высоте окна просмотра (а не на окнах или устройствах).
Ландшафтный режим — это когда ширина области просмотра больше высоты видового экрана.
Портретный режим — это когда высота видового экрана больше ширины видового экрана.
Обычно это означает, что настольный монитор находится в ландшафтном режиме, но иногда это портрет.
В большинстве случаев мобильные устройства сообщают о своем разрешении, а не о реальном размере пикселей, которые могут отличаться из-за плотности пикселей. Для того, чтобы заставить их сообщать их реальный размер пикселя добавить следующее внутри head тега:
<meta name="viewport" content="width=device-width, initial-scale=1">
Основной пример
Вышеупомянутый медиа-запрос определяет два условия:
- Страница должна просматриваться на обычном экране (не на печатной странице, проекторе и т. Д.).
- Ширина порта просмотра пользователя должна быть не менее 720 пикселей.
Если эти условия выполнены, стили внутри медиа-запроса будут активны, а цвет фона на странице будет синим.
Запросы мультимедиа применяются динамически. Если на странице загружаются условия, указанные в запросе на медиа, CSS будет применяться, но будет немедленно отключен, если условия перестанут выполняться. И наоборот, если условия изначально не выполняются, CSS не будет применяться до тех пор, пока не будут выполнены указанные условия.
В нашем примере, если ширина порта представления пользователя первоначально больше 720 пикселей, но пользователь сжимает ширину браузера, цвет фона перестанет быть голубым, как только пользователь изменит размер порта представления на менее чем 720 пикселей в ширина.
Использовать по тегу ссылки
Эта таблица стилей по-прежнему загружается, но применяется только на устройствах с шириной экрана более 600 пикселей.
MediaType
Запросы СМИ имеют необязательный параметр mediatype . Этот параметр устанавливается непосредственно после @media декларации ( @media mediatype ), например:
Приведенный выше код CSS придаст HTML элементу DOM белый цвет фона при печати.
Параметр mediatype имеет необязательный или not only префикс, который будет применять стили ко всему, кроме указанного медиатипа или только указанного типа носителя, соответственно. Например, следующий пример кода применит стиль к каждому типу носителя, кроме print .
Точно так же, просто показывая это только на экране, это можно использовать:
Список mediatype может быть лучше понят со следующей таблицей:
| Тип носителя | Описание |
|---|---|
| all | Применить ко всем устройствам |
| screen | Компьютеры по умолчанию |
| Принтеры в целом. Используется для создания печатных версий веб-сайтов | |
| handheld | КПК, мобильные телефоны и карманные устройства с небольшим экраном |
| projection | Для проектной презентации, например, проекторы |
| aural | Речевые системы |
| braille | Брайлевские тактильные устройства |
| embossed | Вышитые брайлевские принтеры |
| tv | Телевизионные устройства |
| tty | Устройства с сеткой символов с фиксированным шагом. Терминалы, портативные устройства. |
Использование медиа-запросов для разных размеров экрана
Часто, отзывчивый веб-дизайн включает медиа-запросы, которые являются блоками CSS, которые выполняются только в том случае, если условие выполнено. Это полезно для гибкого веб-дизайна, потому что вы можете использовать медиа-запросы, чтобы указать разные стили CSS для мобильной версии вашего сайта в сравнении с настольной версией.
Ширина против Viewport
Когда мы используем «ширину» с медиа-запросами, важно правильно установить метатег. Основной метатег выглядит так, и его нужно поместить внутри <head> .
Почему это важно?
На основе определения MDN «ширина»
Средство ширины носителя описывает ширину поверхности отображения выходного устройства (например, ширину окна документа или ширину окна страницы на принтере).
View-port — это ширина самого устройства. Если ваше разрешение экрана говорит, что разрешение 1280 x 720, ширина вашего порта просмотра «1280px».
Чаще всего многие устройства выделяют различное количество пикселей для отображения одного пикселя. Например, iPhone 6 Plus имеет разрешение 1242 x 2208. Но фактическая ширина видового экрана и высота видового экрана — 414 x 736. Это означает, что для создания 1 пикселя используются 3 пикселя.
Но если вы не установили meta правильно, он попытается показать вашу веб-страницу с ее родным разрешением, что приведет к уменьшенному просмотру (меньшие тексты и изображения).
Медиа-запросы для экранов сетчатки и не Retina
Хотя это работает только для браузеров на базе WebKit, это полезно:
Исходная информация
На дисплее есть два типа пикселей. Один — это логические пиксели, а другой — физические пиксели. В основном, физические пиксели всегда остаются неизменными, потому что они одинаковы для всех устройств отображения. Логические пиксели изменяются в зависимости от разрешения устройств для отображения более качественных пикселей. Соотношение пикселей устройства — это соотношение между физическими пикселями и логическими пикселями. Например, MacBook Pro Retina, iPhone 4 и выше сообщают о соотношении пикселей устройства в 2, поскольку физическое линейное разрешение вдвое превышает логическое разрешение.
Причина, по которой это работает только с браузерами на основе WebKit, объясняется:
- Префикс поставщика -webkit- перед правилом.
- Это не было реализовано в других машинах, кроме WebKit и Blink.
Терминология и структура
Медиа-запросы позволяют применять правила CSS на основе типа устройства / носителя (например, экрана, печати или портативного компьютера), называемого типом носителя , дополнительные аспекты устройства описаны с такими мультимедийными функциями , как доступность цветов или размеров видовых экранов.
Общая структура медиа-запроса
Медиа-запрос, содержащий тип носителя
Медиа-запрос, содержащий тип носителя и функцию мультимедиа
Медиа-запрос, содержащий функцию мультимедиа (и неявный тип носителя «все»)
Медиа-запросы и IE8
Медиа-запросы вообще не поддерживаются в IE8 и ниже.
Обходное решение на основе Javascript
Чтобы добавить поддержку IE8, вы можете использовать один из нескольких решений JS. Например, ответ может быть добавлен для добавления поддержки медиа-запросов для IE8 только с помощью следующего кода:
CSS Mediaqueries — это другая библиотека, которая делает то же самое. Код для добавления этой библиотеки в ваш HTML-код будет идентичным:
Альтернативный вариант
Если вам не нравится решение на основе JS, вы также должны подумать о добавлении таблицы стилей IE <9, в которой вы настраиваете свой стиль для IE <9. Для этого вы должны добавить следующий код HTML в свой код:
Замечания :
Технически это еще одна альтернатива: использование CSS-хаков для IE <9. Он имеет то же влияние, что и таблица стилей IE <9, но для этого вам не нужна отдельная таблица стилей. Однако я не рекомендую этот параметр, поскольку они создают недопустимый код CSS (что является лишь одной из причин, по которым использование хаков CSS обычно не одобряется сегодня).
Использование медиавыражений
Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у ваших пользователей.
Медиа для разных типов устройств
Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:
Список устройств вы можете найти перейдя по этой ссылке (en-US) . Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.
Узконаправленные @media
Media features (en-US) описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:
Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:
Если вы создаёте медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:
Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.
Создание комплексных медиавыражений
Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются логические операторы: not , and , and only . Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.
Примечание: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
To limit the styles to devices with a screen, you can chain the media features to the screen media type:
comma-separated lists
You can use a comma-separated list to apply styles when the user’s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user’s device has either a minimum height of 680px or is a screen device in portrait mode:
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.
The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can’t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
. so that the above query is evaluated like this:
. rather than like this:
As another example, the following media query:
. is evaluated like this:
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.