Медиа запросы (@media ) позволяют сделать из одного сайта несколько версий дизайна в зависимости от характеристик устройства, на котором осуществляет просмотр. К примеру, на мобильных устройствах экраны небольшие, а значит для них лучше использовать резиновую или блочную верстку, чтобы повысить читабельность.

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

Синтаксис CSS @Media

@media тип_устройства and|not|only (медиа_особенности ){ ... Описание стилей... }

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

• 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 ( | ) - определяет в каком положение находится экран (альбомном или портретном)
• resolution (min-resolution, max-resolution) - определяет разрешение устройства вывода

Из всех выше описанных медиа особенностей лишь два используются наиболее часто min-width и max-width .

Примеры с медиа запросами

Пример №1. Ограничение на максимальную ширину

@media screen and (max-width : 800px ) { ... стили ... }

Например, данный код будет работать для устройств с шириной экрана меньше 800px. Атрибут screen and можно не писать.

Пример №2. Задание диапазона на ширину

@media (max-width : 1024px ) and (min-width : 640px ) { ... стили ... }

Этот код только будет работать только в случае, если ширина экрана находится в диапазоне от 640 до 1024 пикселей.

Пример №3. Исключение диапазона

@media (min-width : 1024px ), (max-width : 640px ) { ... стили ... }

Этот код только будет работать только в случае, если ширина экрана меньше 640 пикслей или наоборот больше 1024 пикселей.

Пример №4. Исключение устройства

@media all and (not handheld ) { ... стили ... }

Стиль будет работать для всех устройств кроме смартфонов handheld .

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

Например:

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

Давайте сразу разберём пример медиа-запроса :

body {
font-size: 9pt;
}
}

Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках ". Чтобы лучше понять, как это работает, напишите вот такой код:

Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px , то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS .

Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body , а сколько угодно самых разных селекторов.

Так же есть и другие параметры, такие как min-width , который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height , отвечающие за высоту. Так же можно комбинировать разные параметры через and :

@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}

В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px .

Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width . Иногда ещё и min-width . И ещё раз повторяю, что есть и другие медиа-запросы в CSS , но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.

CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS 3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.

В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.

Медиа запросы

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

Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.

Веб сайт dConstruct 2010 на экране iPhone

На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!

Использование медиа запросов для создания таблицы стилей для телефонов

Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже - очень простой и имеет всего две колонки.

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

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

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

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

@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }

В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none ; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.

Присоединение отдельной таблицы стилей с использованием медиа запросов

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

Присоединение таблицы стилей для мобильных устройств:

Testing media queries

Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?

В процессе разработки вам может помочь отличный сайт ProtoFluid . Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.

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

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

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { }

После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.

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

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

Настройка существующего сайта

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

Шаблон страниц

Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.

Добавление нового файла стилей

Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.

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

Сжатие заголовка

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

Body { background-image: url(/img/small-bg.png); } #wrapper { width: auto; margin: auto; text-align: left; background-image: url(/img/small-logo.png); background-position: left 5px; background-repeat: no-repeat; min-height: 400px; }

Линеаризуем шаблон

Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto . Таким образом все колонки выстроятся одна под другой.

Article #aside { float: none; width: auto; }

"Причесываем"

Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.

Проверка сайта на iPhone

При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы - нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.

После добавления тега meta сайт стал выводиться как было задумано - в одну колонку:

Простая модификация сайта позволяет сделать легко ваш ресурс доступным для пользователей мобильных устройств.

Заключение

Использованием медиа запросов может ввести CSS3 в вашу повседневную деятельность. Стоить помнить о том, что браузеры, которые поддерживают медиа запросы, также поддерживают все остальные свойства CSS3. Таким образом можно использовать все возможности CSS3, когда пользователь использует iPhone или другое мобильное устройство.

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет . Это первый шаг на пути к достижению нашей цели. Вместо атрибута width для контейнеров мы стали указывать max-width . Атрибут height был заменен атрибутом min-height , чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS:

Img { max-width: 100%; }
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами , в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.

Области просмотра

Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.

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

Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.

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

@media screen and (min-width:480px) and (max-width:800px) { /* Target landscape smartphones, portrait tablets, narrow desktops */ } @media screen and (max-width:479px) { /* Target portrait smartphones */ }
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается .

@media all and (orientation: landscape) { /* Target device in landscape mode */ } @media all and (orientation: portrait) { /* Target device in portrait mode */ }

Изменяется расположение контента и масштаб изображений –

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

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

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

Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:

@media screen and (max-width: 800px) { /* specific CSS */ }
Последний медиа-запрос предназначен для смартфонов:

@media screen and (max-width: 479px) { /* specific CSS */ }
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.

Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.

Изменяется расположение контента, удалено большое изображение – О Google

Заключение

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

В каких браузерах работает?

Для чего используется?

Как уже известно из спецификации CSS, особый стиль оформления можно создавать для отдельного типа устройства. С выходом спецификаций версии CSS3 стало возможно еще корректировать оформление в зависимости от технических возможностей этих самых устройств. В качестве примера, можно вычислить девайс, у которого максимальное разрешение экрана 640 пикселей и составить для него отдельную таблицу стилей, а для прочих устройств можно с генерировать свое оформление. Кроме этого с легкостью можно определять такие показатели, как монохромность экрана, ориентации страниц при выводе и прочие полезные характеристики. Также стоит отметить, что все эти параметры можно кооперировать. Таким образом мы можем определить уникальный стиль для устройства, у которого определенное разрешение и ориентация страниц.

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

Как правильно задавать?

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

Носитель	Пояснение
all	Соответствует всем возможным носителям. Это значения установлено по умолчанию
braille	Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят.
embossed	Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением).
handheld	Соответствует КПК и похожим устройствам.
print	Печатающие устройства.
projection	Проектор.
screen	Монитор.
speech	Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер.
tty	Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп).
tv	Телевизор.

Логические операторы с примерами использования в коде

Союз, который предназначен для объединения разных условий. Его логическое значение - "и" . Ниже представлен пример, который формирует стилевое оформление для цветных носителей.

@ media all and (color) { ... }

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

@ media all and (not handheld) { ... }

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

Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы

@ media only all and (not handheld) { ... }

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

@ media all and (orientation: landscape) , all and (min- width: 480px) { ... }

Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.

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

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

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

aspect-ratio (min-aspect-ratio, max-aspect-ratio)

Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).

color (min-color, max-color)

Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример

@ media screen and (min- color: 3 ) { /* Минимум 512 цветов */ body { background: #ccc; } }

color-index (min-color-index, max-color-index)

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

@ media all and (min- color- index: 256 ) { ... }

device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)

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

@ media screen and (min- device- aspect- ratio: 16 / 9 ) { ... }

device-height (min-device-height, max-device-height)

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

device-width (min-device-width, max-device-width)

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

< html> < head> < meta charset= "utf-8" > < title> device- width < style> div { padding: 10px; background: #e8bfad; margin: auto; } @ media screen and (min- device- width: 1600px) { div { width: 1500px; } } @ media screen and (device- width: 1280px) { div { width: 1100px; } } @ media screen and (device- width: 1024px) { div { width: 980px; } } < body> < div> Очень интересная информация для примера бла бла бла и тому подобное.

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

< html> < head> < meta charset= "utf-8" > < title> grid < style> @ media handheld and (grid) and (max- width: 15em) { body { font- size: 2em; } } < body> < p> Текст, который будет считываться с допотопного устройства.

height (min-height, max-height)

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

monochrome (min-monochrome, max-monochrome)

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

@ media print and (monochrome) { body { font- family: Times, "Times New Roman" , serif; } h1, h2, p { color: black; } } @ media print and (color) { body { font- family: Arial, Verdana, sans- serif; } h1, h2, p { color: #556b2f; } }

orientation

Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором - с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства

@ media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } } @ media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } }

resolution (min-resolution, max-resolution)

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

@ media print and (min- resolution: 300dpi) { ... }

Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:

1. Первый метод называется череcстрочный (interlace ) - упрощенный способ считывания информации по которому сначала выводятся четные строчки кадра, а затем не четные.
2. Прогрессивный (progressive ) метод работает по сложному и выводит полную информацию и сразу.

width (min-width, max-width)

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

< html> < head> < meta charset= "utf-8" > < title> Ширина страницы < style> body { background: #eee; } @ media screen and (max- width: 980px) { body { background: #fc0; } } < body> < p> Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.