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

Оглавление (нажмите, чтобы открыть):

Медиа запросы (@media CSS)

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

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

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

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

  • all — для всех типов устройств (по умолчанию используется это значение)
  • braille — для устройств Брайля (для чтения слепыми людьми)
  • embossed — для принтеров Брайля
  • handheld — для смартфонов или портативных устройств
  • print — для принтеров
  • projection — для проекторов
  • screen — для экранов компьютеров, планшетов, смартфонов и т.д.
  • speech — для речевых браузеров
  • tty — для устройств с фиксированным шагом символов, такие как телетайпы и терминалы
  • tv — для телеэкранов

Примечание
Практические все устройства идентифицируют себя как тип screen (смартфоны и планшеты, ноутбуки и настольные компьютеры).

Примечание
Запятая воспринимается как оператор 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 queries CSS как АДАПТИРОВАТЬ сайт

  • CSS / CSS3
  • Flexbox CSS
  • JavaScript
    • JavaScript с нуля
    • JS и Jquery
  • Уроки по 1С-Битрикс
    • Контент менеджер
      • Авторизация на сайте
      • Элементы управления
      • Работа с информацией
      • Управление структурой
    • Сайт на 1С-Битрикс
      • Создание landing page
  • Видео новости
  • Модули расширений
  • Расширения и плагины
    • Bootstrap

Дополнительное видео

ПОДПИСКА на УРОКИ

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

  • что такое Media queries и его составляющие элементы;
  • как формируется медиа запросы;
  • рассмотрим практически пример адаптивного дизайна сайта.

CSS3 медиа запросы или (media queries) – это определенный набор стилей и логических выражений, которые позволяют применять различные стили в зависимости от выполнения каких то дополнительных условий.

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

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

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

Типы носителя

В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .

Типы носителей включают в себя

  • all – Подходит для всех видов устройств. Это значение используется по умолчанию.
  • print – Просмотр на экране страничек в режиме предварительного просмотра печати.
  • screen – Просмотр на экране цветных компьютерных мониторах.
  • speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

  • braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
  • embossed — Принтеры, использующие для печати систему Брайля.
  • handheld — Смартфоны и аналогичные им аппараты.
  • projection – Проекторы.
  • tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
  • tv – Телевизоры.

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

Логические операторы

З атем идут логические операторы, при помощи которых можно писать дополнительные условия, если это необходимо.

К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.

Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

  • and – Связывает друг с другом разные условия (эквивалентно «и»);
  • not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
  • only – Скрывает стили для браузера, которые не поддерживают данные условия;
  • , — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);

Условие медиа запроса

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

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

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

  • width min-width max-width – ширина;
  • height min-height max-height – высота;
  • device-width min-device-width max-device-width – ширина на устройстве;
  • device-height min-device-height max-device-height orientation — высота на устройстве;
  • aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
  • device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
  • resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
  • color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
  • color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
  • monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
  • scan grid – сетка сканирования;

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

Сайт бару, прописываем свои стили и прижмем его к левому краю:

Далее для области под контент пишем свои стили:

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .

Создадим класс и вставим дополнительный блок с этим классом:

У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.

Подключаем CSS media queris

Для наглядной адаптации, сделаем шаблон фиксированной ширины, обернем все наши блоки в обертку, назначим обертке ширину в 980 пик. и отцентрируем по середине экрана.

Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных скобках описываем стили для данного расширения:

Ширину обертки уменьшим на 750 пик.

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

Обертку уменьшаем до 450 пик.

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

Тоже самое проделаем с top_menu

Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.

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

Убираем высоту .sideLeft

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

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

Затем опишем общие стили, и скроем их:

Размер экрана меньше 480px

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

Делаем обертку в 320 пик.

У остальных блоков поменяем цвет.

Для более, плавных переходов, воспользуемся свойством transition, и применим его ко всем элементам.

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

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .

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

Media queries CSS — шпаргалка основных медиа-запросов

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

Мастер Йода рекомендует:  Разработчик

Я оставлю шпаргалку основных медиа запросов (media queries), которые использую на практике сам. Понятное дело, что абсолютно все устройства эти запросы не покроют. При необходимости пишите свои media queries, проставляя нужные контрольные точки. Существует уже определённая статистика, согласно которой есть ряд особо популярных разрешений мониторов, на которые стоит ориентироваться в первую очередь. Вот такая статистика за 2020 год:

Разрешение Пользователей Динамика
1366×768 21.15 % -1.46%
360×640 18.28 % +2.31%
1920×1080 12.29 %-0.85% -0.85%
1280×1024 6.94 % -0.40%
1600×900 4.57 % -0.23%
375×667 4.36 % +0.48%
1024×768 4.08 % -0.26%
320×568 3.83 % +0.10%
1440×900 3.16 % -0.19%
1280×800 3.08 % -0.02%
1680×1050 2.03 % -0.25%
768×1024 2.00 % +0.07%
1536×864 1.93 % +0.22%
320×534 1.84 % +0.05%
320×570 1.62 % +0.09%
1280×720 1.42 % +0.04%
1360×768 1.05 % -0.22%

Шпаргалка Media queries CSS

Сервисы по проверке сайта на адаптивность

Ниже я приведу примеры бесплатных онлайн сервисов для проверки сайта на адаптивность:

Под какие основыные размеры настраивать CSS @media screen?

Сабж. Смотрел разные исходники. Ничего не ясно.

У меня фикс. дизайн 960px в ширину по центру. Хочу адаптивный дизайн сделать.
Но какие именно размеры прописывать в media? По какому принципу они подбираются? Есть какая-то статистика по разрешениям мобильных приложений?

Смотрю сейчас чей-то исходник:

почему именно эти размеры указал верстальщик?

  • Вопрос задан более трёх лет назад
  • 48263 просмотра

Всегда использую эти( это старые брэйкпоинты bootstrap по умолчанию ):

/* Large desktops and laptops */
media (min-width: 1200px) <

/* Portrait tablets and medium desktops */
media (min-width: 992px) and (max-width: 1199px) <

/* Portrait tablets and small desktops */
media (min-width: 768px) and (max-width: 991px) <

/* Landscape phones and portrait tablets */
media (max-width: 767px) <

/* Landscape phones and smaller */
media (max-width: 480px) <

По надобности дописую промежуточные разрешения, если вдруг по дизайну что то падает на 650px, тогда дописую:

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

На этой странице

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

Медиа для разных типов устройств

Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Узконаправленные @media

Media features описывают некие характеристики определенного user agent, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:

Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина viewport меньше или равна 12450px:

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

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

For more media feature examples, please see the reference page for each specific feature.

Создание комплексных медиа запросов

Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not , and , and only . Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

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

Note: 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.

Блог Vaden Pro

  • 172 просмотра

Характеристики свойства

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

9.0+ 1.0+ 10.0+ 4.0+ 3.6+ 2.0+ 2.0+

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

color (min-color, max-color)

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

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

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

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

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

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

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

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

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

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

height (min-height, max-height)

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

monochrome (min-monochrome, max-monochrome)

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

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

resolution (min-resolution, max-resolution)

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

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

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

width (min-width, max-width)

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

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Создаём мобильную версию сайта, используя CSS3 медиа-запросы

CSS3 продолжает радовать и, одновременно, разочаровывать веб-дизайнеров и веб-разработчиков. Мы радуемся возможностям, которые открывает перед нами CSS3, и тому, сколько проблем можно будет решить, используя их. Разочарование заключается в том, что все эти возможности недоступны браузерам Internet Explorer 8 и ниже. В этой статье будет продемонстрирована техника, использующая функционал CSS3, который также не поддерживается в Internet Explorer 8. На самом деле это не имеет никакого значения, т.к. главной областью применения этой техники являются мобильные устройства, такие как Iphone и Android-смартфоны, у которых браузеры поддерживают большое количество свойств CSS3.
В этой статье я объясню, как, с помощью нескольких правил CSS, вы можете создать Iphone-версию вашего сайта. Мы взглянем на очень простой пример и, попутно, я буду объяснять, как написать и использовать таблицу стилей для мобильных устройств для существующего сайта.

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

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

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

  • высоту и ширину окна браузера
  • высоту и ширину экрана устройства
  • положение в пространства (вертикально или горизонтально)
  • разрешение экрана

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

Так выглядит сайт на экране монитора:

А так он выглядит на экране смартфона:

Как вы видите на примере выше, мобильная версия сайта не просто была уменьшена, чтобы соответствовать экрану на телефоне – её структура была полностью переработана и спроектирована заново, чтобы сайт легко воспринимался на маленьком экране устройства. Многие подумают, что это специальный макет для iPhone, но это не так. Сайт одинаково выглядит на Android-устройствах, iPhone и в телефонах с браузером Opera Mini. используя медиа-запросы мы определяем свойства устройств и отображаем специально написанные стили для них.

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

Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.

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

Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:

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

Мы используем альтернативное изображение меньшего размера и уменьшаем высоту заголовка, затем отменяем свойство float для контента и навигации, установив его в значение none . Это нужно чтобы блоки с контентом и навигации располагались в нормальном потоке – друг под другом. Следующий шаг – установка ширины для контента, равной родительского элемента, а ширины блока навигации установим в значение auto . Все эти правила вступят в силу только на маленьком экране.

Подключение отдельной таблицы стилей, используя медиа-запросы

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

Чтобы подключить отдельную таблицу стилей и, используя каскадность, переписать существующие стили, необходимо после подключения основного css-файла написать следующие строки:

Модернизация существующего сайта

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

Макет для экрана монитора

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

Подключаем новую таблицу стилей

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

Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.

Сокращаем размер шапки

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

Изменяем макет

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

Прибираемся

Настало время проверить наш макет в онлайн-эмуляторе и подкорректировать мелкие недочёты, чтобы всё смотрелось супер. Для облегчения этого процесса рекомендую использовать расширение firebug для Mozilla.

Тестируем на Iphone

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

Вот теперь сайт отображается как надо!

Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.
Источник

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

Медиа-запросы разделяются в зависимости от пользовательского устройства, и в настоящее время поддерживаются два типа запросов — « screen » и « print «. Медиа-запросы обеспечивают расширяемость функционала сайтов и веб-приложений, позволяя задавать более четкое определение стилей.

Что такое медиа-запрос?

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

Как уже было сказано, в настоящее время широко реализована поддержка двух типов: « screen » и « print «.

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

Как определить медиа-запрос?

Простой медиа-запрос может быть определен в HTML следующим образом:

В приведенном выше примере, мы указали, что для типа медиа « print » браузер пользователя должен использовать таблицу стилей myexample.css .

То же самое может быть объявлено как @import-правило в CSS:

Когда браузер пользователя обрабатывает приведенный выше медиа-запрос, он определяет, текущий тип медиа — print или нет. Если да, то будет применяться таблица стилей « myexample.css «. Следовательно, вывод медиа-запросов можно организовать в зависимости от выполняемых условий.

Если тип устройств не задан или задано значение ‘ all ‘, то стили будут применяться для всех типов медиа.

В приведенном выше примере, стили будет применяться как для типа ‘ print ‘, так и для типа ‘ screen ‘. Это эквивалентные объявления. Как и следующий CSS-код :

Медиа-запросы могут быть объединены в сложные медиа-запросы:

Этот запрос также может быть объявлен следующим образом:

Медиа-запросы также поддерживают логическое выражение NOT , используя ключевое слово « NOT «:

В приведенном выше примере мы указали, что стили не будут применяться к типу ‘ print ‘, а только к типу ‘ screen ‘.

Характеристики устройств, которые можно указать в медиа-запросах

  • color ;
  • color-index ;
  • device-aspect-ratio ;
  • device-height ;
  • device-width ;
  • grid ;
  • height ;
  • monochrome ;
  • resolution ;
  • scan ;
  • width .

Завершение

Из этой статьи вы узнали о медиа-запросах CSS3. Я надеюсь, что вы нашли эту информацию полезной для себя.

Данная публикация представляет собой перевод статьи « Understanding CSS3 Media Queries » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

Когда использовать медиа-запросы?

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

  • Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
  • Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
  • Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
  • Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
  • Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
  • Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

Mobile First или Desktop First?

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

  • Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media .
  • Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

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

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана ( min-width ), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width , тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Далее в учебнике: принцип создания гибкой сетки в CSS.

Медиа-запросы: Обзор различных возможностей

Дата публикации: 2014-09-18

От автора: Если вам приходилось работать над созданием отзывчивого дизайна, то, наверняка, вы использовали медиа-запросы. Медиа-запросы – это понятный и простой способ для создания отзывчивых сайтов с помощью CSS. Они позволяют вам изменять оформление страницы при определенном размере экрана пользователя.

Вот простой пример:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

В результате применения данного медиа-запроса текст абзаца будет становиться красным, если ширина экрана будет равна 700px и меньше. Если вы хотите, чтобы текст становился красным, если ширина экрана будет больше 700px, тогда нужно будет использовать, наоборот, «min-width». Вы также можете создать два отдельных запроса, используя «max-width» и «min-width». Вот как это будет выглядеть:

Прекрасно! Теперь текст будет становиться красным только при условии, что ширина экрана будет находиться в диапазоне между 500px и 700px (включительно).

А что если вы хотите применить какие-нибудь стили, если ширина экрана будет меньше 500px или больше 700px? Вы можете это сделать, разделив запросы запятой вот так:

Обратите внимание, что в демо-примере текст не становится красным, если ширина окна находится в диапазоне между 500px и 700px (не включительно). Медиа-запросы также можно указывать различными способами. Прямо в HTML-документе:

Вдобавок к этому, можно использовать правило @import в CSS-файле:

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

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

Ширина и высота

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

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

Ориентация

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

В данном примере к элементу menu применяется свойство float: left, если у устройства будет активным альбомный режим. Тоже самое можно прописать и для портретного режима:

Чтобы узнать больше об использовании параметра orientation, прочтите данную статью.

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

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

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

Мы также можем применять стили в зависимости от того, используются или нет устройством индексированные цвета. Чтобы применить стили для такого устройства, нужно прописать следующее:

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Одноцветность

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

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

Пропорции

Пропорции экранов у устройств сильно изменились с момента появления смартфонов и планшетов. На старых мониторах привычным соотношением сторон экрана было значение 4:3 и 5:3, но теперь благодаря новым стандартам HD-видео, появились дисплеи с пропорциями 16:9 и 16:10.

Есть два способа использовать параметр пропорций. Вы можете использовать пропорции окна браузера (с помощью aspect-ratio) или пропорции экрана самого устройства (с помощью device-aspect-ratio).

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

А что если вы захотите спрятать какой-то контент от широкоформатных мониторов? Тогда вы можете попробовать следующее:

В этом примере, абзацы не будут отображаться, если дисплей имеет пропорции 16:9 или 16:10.

Сетка

Медиа-функция grid относится к устройствам наподобие терминалов. Это может быть терминальное приложение, как показано на картинке, или дисплей устаревшего телефона, который использует для отображения информации один единственный шрифт.

В данном примере изображения не будут отображаться, если устройство пользователя использует фиксированный размер пикселей:

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

Разрешение

Медиа-функция resolution может быть использована для определения стилей для устройств вывода с определенным значением dpi (точки на CSS «дюйм») или dpcm (точки на CSS «сантиметр»). Например, если бы вам захотелось назначить другой шрифт для экрана с разрешением менее 150dpi, тогда ваш код выглядел бы так:

Единственное, на что следует обратить внимание при использовании медиа-функции resolution, – это печать. Для принтеров значения dpi и dpcm относятся к их разрешающей способности при печати.

Развертка

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

Но данный метод работает только для ТВ-устройств.

Медиа-типы

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

braille – Для устройств системы Брайля для слепых людей. (Пример 1 | Пример 2)

embossed – Для идеи будущего, известной как выпуклые экраны. (Патент | Экспериментирование)

handheld – Для телефонов, карманных компьютеров и других небольших устройств.

print – Для принтеров.

projection – Для мелко- и крупномасштабных проекторов.

screen – Наиболее распространенный тип. Для всех устройств, имеющих экраны.

speech – Для устройств, воспроизводящих речь. (Пример)

tty – Для телекоммуникационных устройств для глухих. (Пример)

tv – Для телевизоров.

Ходили также слухи о том, что медиа-тип 3d-glasses станет валидным, хотя он до сих пор не определен ни в одной из спецификаций W3C. Однако он упомянут в этой спецификации W3C. И если все-таки медиа-тип 3d-glasses будет определен, то его можно будет также использовать в HTML4, поскольку медиа-типы имеют обратную совместимость.

Для дальнейшего чтения

Вот несколько ссылок на ресурсы по данной теме:

Медиа-запросы уровень 3 спецификация на сайте W3C

Медиа-запросы уровень 4 спецификация на сайте W3C

Заключение

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

Автор: Ty Strong

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Мастер Йода рекомендует:  Стали известны основные факторы ранжирования новостей в ленте на Facebook
Добавить комментарий