Возможно ли в медиа запросах указывать диапазон значений от 375 до 768 пикселей
Обновлено: 07.07.2024
Медиа запросы ( @media ) позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства, на котором осуществляет просмотр. К примеру, на мобильных устройствах экраны небольшие, а значит для них лучше использовать резиновую или блочную верстку, чтобы повысить читабельность.
Примечание
Медиа запросы не делают несколько версий сайта для конкректных устройств, а позволяют сделать несколько вариантов дизайна за счет применения разных стилей. Сделать разные стили гораздо проще и дешевле, чем делать разные сайты.
Синтаксис CSS @Media
Где тип устройства может принимать следующие значения:
- all - для всех типов устройств (по умолчанию используется это значение)
- braille - для устройств Брайля (для чтения слепыми людьми)
- embossed - для принтеров Брайля
- handheld - для смартфонов или портативных устройств
- print - для принтеров
- projection - для проекторов
- screen - для экранов компьютеров, планшетов, смартфонов и т.д.
- speech - для речевых браузеров
- tty - для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
- tv - для телеэкранов
Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).
- and (и) - логическое И. С помощью него можно задать несколько условий и только при условии, что все они будут выполнены, тогда стиль будет применен
- or (или) - логическое ИЛИ. Необходимо, чтобы хотя бы одно из условий выполнилось
- not (не) - логическое отрицание. Условие стоящие за not должно не выполняться
- only - скрыть правило @media от старых браузеров. Новые браузеры просто не заметят этот оператор
Примечание
Запятая воспринимается как оператор or.
Рассмотрим какие есть медиа особенности.
- aspect-ratio (min-aspect-ratio, max-aspect-ratio) - определяет отношение ширины и высоты области просмотра
- color (min-color, max-color) - определяет количество бит на цвет для устройства
- color-index (min-color-index, max-color-index) - определяет количество цветов, которое устройство может отображать
- device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio) - определяет соотношение сторон экрана устройства через. Записывается через слэш
- device-height (min-device-height, max-device-height) - определяет всю доступную высоту экрана устройства
- device-width (min-device-width, max-device-width) - определяет всю доступную ширину экрана устройства
- grid - отвечает за вывод у устройства. Бывает два вида: сеточный и точечный. Терминалы, дисплей телефона поддерживают только один шрифт, что равносильно значению 1.
- height (min-height, max-height) - высота области просмотра
- width (min-width, max-width) - ширина области просмотра
- orientation ([landscape] | [portrait]) - определяет в каком положение находится экран (альбомном или портретном)
- resolution (min-resolution, max-resolution) - определяет разрешение устройства вывода
Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width .
Примеры с медиа запросами
Пример №1. Ограничение на максимальную ширину
Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.
Пример №2. Задание диапазона на ширину
Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.
Пример №3. Исключение диапазона
Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.
Пример №4. Исключение устройства
Стиль будет работать для всех устройств кроме смартфонов handheld .
Чтобы не создавать путаницу в стилях и облегчить загрузку сайта, файлы со стилем для медиа запросов можно подгружать только в том случае, если это необходимо. Делается это через тег link:
В этой статье мы подробно рассмотрим, что такое медиа-запросы, как они работают и как их правильно использовать, в том числе и для создания адаптивного дизайна. Разберём конструкции @media, которые используются в Bootstrap.
Что такое медиа-запросы
Медиа-запросы (media queries) – это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений технических параметров устройств. Иными словами, это конструкции, которые позволяют определять на основании некоторых условий какие стили необходимо использовать на веб-странице, а какие нет.
Медиа-запросы появились в спецификации CSS3 и на сегодняшний день поддерживаются всеми современными браузерами (Chrome 4+, Firefox 3.5+, IE 9+, Opera 9+, Safari 4+).
Медиа-запросы предназначены для создания адаптивных дизайнов. Адаптивный дизайн отличается от других тем, что он может «приспосабливаться» (видоизменяться) в зависимости от того, какую ширину экрана имеет устройство (браузер).
Но при создании адаптивных веб-страниц также необходимо обратить внимание на метатег viewport. Данный тег обеспечивает корректное отображение адаптивных дизайнов сайтов на экранах устройств, имеющих высокую плотность пикселей. Иными словами, он устанавливает соответствие между CSS и физическим разрешением веб-страницы.
Подключение метатега viewport к странице осуществляется так:
Синтаксис
Создание медиа-запроса начинается с ключевого слова @media после которого указывается одно или несколько условий . В качестве условия можно указывать тип устройства или требования к определённой характеристике . Требование к определённой характеристике записывается в круглых скобках .
Комбинирование нескольких условий выполняется с помощью логических операторов .
После составления @media , стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.
Пример медиа-запроса с одним условием:
Пример медиа-запроса с комбинированием нескольких условий:
Типы устройств
В @media можно указывать определённые типы устройств :
- all – для всех;
- print – для принтеров и в режиме предварительного просмотра страницы перед печатью;
- screen – для устройств с экранами;
- speech – для программ чтения с экрана.
Например, этот @media только для экранов:
А здесь для экранов и принтеров:
Логические операторы
Логические операторы and , , (запятая), not и only предназначены для создания сложных медиа-запросов.
Оператор and используется для объединения нескольких условий. В этом случае их результат будет истинным, когда каждое из них будет истинным.
Например, следующий @media будет применяться только при выполнении всех трёх условий (это экран, width >= 1200px и ориентация landscape):
, (запятая)
Применение стилей, когда необходимо лишь выполнение одного из указанных условий, достигается посредством разделения их между собой с помощью , (запятой).
В этом примере стили будут применяться к странице в двух случаях. Когда width >= 544px или ориентация portrait .
Ключевое слово not используется для отрицания.
При использовании not с and отрицание работает для всего медиа-запроса. При этом, когда указываем not необходимо обязательно задавать тип устройства.
Например, применим стили только в том случае, когда не (экран и width >= 411px и height >= 731px) .
При использовании not в выражении с запятой он добавляет отрицание только для этой части.
Например, применим стили когда истинно следующее условие: не экран или не width >= 411px .
Ключевое слово only предназначено для того, чтобы браузеры, которые не поддерживают CSS3 медиа-запросы их игнорировали. В настоящее время это уже не актуально, поэтому использовать only не нужно.
Медиа-характеристики
При составлении условия кроме типов устройств и логических операторов можно ещё задавать требования к определённым характеристикам , которые должен иметь браузер, устройство вывода, или окружение. В некоторых источниках характеристики называют медиа-функциями.
Каждая характеристика в @media должна быть заключена в круглые скобки.
При этом применяться стили указанные в @media будут также как раньше, т.е. только в том случае, когда результат вычисления всего выражения будет являться истиной.
width
Медиа-характеристика width позволяет задать условие на равенство ширины области просмотра определённому значению.
Например, применим CSS только для viewport с шириной 320px.
Для определения диапазона можно использовать min-width и max-width .
Например, @media для ширины viewport от 576px до 1200px:
Для ширины больше 768px:
Если нужно меньше 1400px:
height
Для задания условий в отношении высоты viewport можно использовать height , min-height и max-height .
Например, @media для высоты viewport больше 720px:
orientation
С помощью orientation можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.
Например, в зависимости от ориентации viewport будем отображать разные картинки:
aspect-ratio
Характеристики aspect-ration , min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.
resolution
Характеристики resolution , min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.
Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:
Стили для печати страницы с плотностью пикселей больше 300dpi:
Медиа-запросы в <link> и @import
При подключении таблицы стилей можно с помощью атрибута media установить медиа-запросы и тем самым определить условия, когда они должны использоваться.
Кроме <link> , их также можно использовать в @import :
Медиа-запросы для 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.
Комментарии:
Добрый день! Подскажите, пожалуйста, как перестроить расположение блоков в зависимости от устройства?Я создал в коде html 3 варианта расположения блоков. Как сделать так, чтоб блоки меняли размеры и перестраивались в зависимости от ширины экрана? Необходимо использовать медиа-запросы или JavaScript (скриншот)?
Спасибо! Здравствуйте. Подскажите, пожалуйста, можно ли с помощью медиа запроса «разбить» блок? при отображении на ширине 480px должен отображаться один блок с текстом, а при 1000рх и больше — он должен разбиваться на два одинаковых по ширине, по бокам страницы.
вот этот код даёт только один блок слева при 1000рх, как получить второй?
Здравствуйте. Вам необходимо создать 2 блока. На маленьких экранах в этом случае следует отображать один блок, а второй – скрывать (display: none). На больших экранах отображать 2 блока с нужной шириной. Это если вам нужно создать именно блоки.
Если нужно просто разбить контент, то можно использовать колонки (column-count). Про создание многоколоночного текста можно почитать в этой статье. Да, нужны блоки. Получается на большом экране должно быть два блока с текстом и картинка между ними. А на маленьком — один блок с текстом из двух больших блоков, и картинка уже под этим блоком…
Добрый день!
Такой вопрос, применил в js
Всё работает, но! например, при повороте экрана на большой мобилке не отображается большое меню (а должно), плюс пользователь всегда может сжать браузер
Отсюда вопрос: как сделать так, чтобы js «слушал» изменение размера?
Здравствуйте!Так, конечно, у вас код сработает один раз.
В этом случае его нужно добавить в обработчик события, который будет вызываться при смене размеров экрана:
Может кому-то поможет. Все дело было в работе LiveServer для VSCode. При стандартном открытии html документа все брейкопинты работают хорошо) Добрый день, подскажите: использую Bootstrap 4.3.1. Сделал макет при помощи готовых классов. При включении панели разработчика и настройки адаптивности, возникла проблема. до 512px работают классы col-sm, с 512px до 660px col-md, с 660px до 799px col-lg. В документации идут значения 576px, 768px, 992px и 1200px. Почему у меня стили присваиваются на непонятных значениях ширины?
Привет!
576px, 768px, и т.д. — это значения по умолчанию. Их можно изменить. Скорее всего вы используете сборку Bootstrap, в которой эти значения по умолчанию переопределены.
Извиняюсь может я слишком загнался по этому вопросу и можно закончить проект с теми брейкпоинтами что есть, но очень хочется разобраться как это работает)
Это работает очень просто.
Первое CSS правило отрабатывает всегда. Оно задаёт .container 100% ширину того блока, в который он помещён и центрирует его в нём в горизонтальном направлении по центру. Если ширина viewport меньше 576px, то остальные правила не отрабатывают. В остальных правилах имеются условия, и они будут отрабатывать только в том случае, если ширина viewport бразуера пользователя будет не меньше указанной величины (min-width).
Если ширина viewport браузера пользователя больше или равно 576px и меньше 768px то к .container применятся все CSS свойства заданные в первом правиле и CSS свойство max-width: 540px. Т.к. 2 правило проходит по условию.
Если ширина viewport бразуера пользователя больше или равно 768px и меньше 992px, то к .container применятся все CSS свойства, заданные в первом правиле, max-width: 540px и max-width: 720px. Т.к. 2 и 3 правило проходит по условию. Но CSS свойство max-width: 720px расположено ниже по коду, чем CSS-свойство max-width: 540px. В результате будет применены все CSS свойства, заданные в первом правиле и max-width: 720px.
Здравствуйте! Спасибо за статью… но помогите разобраться, я никак не могу понять и всё время путаюсь, каким образом делается адаптивность через @media (min-width). Я все время использую @media (max-width). Мне дают макет, я по нему делаю верстку, а потом уменьшаю экран и пишу медиазапросы @media (max-width)… Но min-width идет от меньшего к большему и у меня всё в голове «ломается», ведь изначально уже сделано всё для большего размера, а тут получается каждый брейкпоин идет к большему. Подскажите, как их правильно применять?"@media (min-width)" удобно использовать, когда вы при разработке дизайна используете стратегию «Mobile First», т.е. сначала пишите стили для отображения страниц на самых маленьких экранах, затем переходите к более крупным и так далее.
В этом случае вы в самом начале пишите стили для самых маленьких устройств без использования "@media (min-width)".
Затем переходите к следующей ширине после самых маленьких устройств. На этом этапе переопределяете существующие стили, если они должны для данной ширины иметь другой вид, и при необходимости добавляете новые. Для этого вы их заключаете в "@media (min-width)".
При этом этот фрагмент стилей должен располагаться после дефолтных стилей.
Затем переходите к следующей ширине и т.д. При этом важно соблюдать порядок следования фрагментов, т.е. сначала стили без "@media (min-width)", потом, например, с использованием правила "@media (min-width: 576px)", далее с "@media (min-width: 768px)" и т.д.
Если вы проектируете, начиная с самого большого размера, то в этом случае лучше создавать наоборот. Т.е. сначала создаёте дефолтные стили, которые будут определять дизайн веб проекта на самых больших экранах. Далее переходите к более маленьким. На каждом из этих этапов вы переопределяете существующие стили, действующие на эту ширину и заключаете их в @media (max-width), чтобы их действие не распространилась на более большую ширину. Но этот вариант разработки обычно не используют, предпочитая стратегию «Mobile First.
Недавно мы опубликовали новый веб-сайт нашей компании 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.
Кто мы
Мы команда молодых разработчиков и дизайнеров, находящихся в Падуя, Италия. Мы разрабатываем мобильные приложения и веб-сайты и всегда готовы создавать что-то великое
Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселов и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.
Возможности медиа-запросов не ограничиваются выявлением мобильных устройств, с их помощью можно создавать адаптивный макет. Такой макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Медиа-запросы ограничивают ширину макета и при достижении этого значения (к примеру за счёт уменьшения окна или при просмотре на устройстве с указанным размером) уже применяется другой стиль.
Синтаксис
Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Логические операторы, применяемые в медиа-запросах
Логическое И. Указывается для объединения нескольких условий.
Пример. Стиль для всех цветных устройств
Логическое НЕ. Указывается для отрицания условия.
Пример. Стиль для всех устройств кроме смартфонов
Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение
следует понимать как
Применяется для старых браузеров, которые не поддерживают медиа-запросы.
Пример. Стиль для новых браузеров
В списке нет логического оператора ИЛИ, его роль выполняет запятая. Перечисление нескольких условий через запятую говорит о том, что если хотя бы одно условие выполняется, то стиль будет применён.
Пример. Стиль для устройств с альбомной ориентацией или минимальной шириной 480 пикселов.
Также при использовании операторов следует указывать скобки, чтобы менять приоритет операций.
Медиа-функции
Медиа-функции задают технические характеристики устройства, на котором отображается документ. Стиль выполняется в том случае, если запрос возвращает истину, иными словами, указанные условия выполняются.
Большинство функций содержат приставку min- и max-, которая соответствуют минимальному и максимальному значению. Так, max-width: 400px означает, что ширина окна браузера меньше 400 пикселов, а min-width: 1000px , наоборот, сообщает, что ширина окна больше 1000 пикселов.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение ширины и высоты отображаемой области устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/).
color (min-color, max-color)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.
Пример 1. Стиль для цветных устройств
color-index (min-color-index, max-color-index)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет количество цветов, которое поддерживает устройство. В примере 2 показан стиль для экранов отображающих не меньше 256 цветов.
Пример 2. Цветной дисплей
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число
Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.
Пример 3. «Киношное» соотношение
device-height (min-device-height, max-device-height)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную высоту экрана устройства или печатной страницы.
device-width (min-device-width, max-device-width)
Тип носителя: все кроме speech
Значение: размер
Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.
Пример 4. Ширина макета
HTML5 CSS3 IE Cr Op Sa Fx
Тип носителя: all
Значение: нет
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).
Пример 5. Размер букв
HTML5 CSS3 IE Cr Op Sa Fx
height (min-height, max-height)
Тип носителя: все кроме speech
Значение: размер
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
Пример 6. Стиль для принтера
orientation
Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).
Пример 7. Использование ориентации устройства
resolution (min-resolution, max-resolution)
Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
Пример 8. Разрешение принтера
Тип носителя: tv
Значение: interlace | progressive
width (min-width, max-width)
Тип носителя: все кроме speech
Значение: размер
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Читайте также: