Media css для мобильных устройств: Адаптивный и мобильный дизайн с CSS3 Media Queries / Habr – Какие css media запросы прописать для мобильных устройств? — Хабр Q&A

Содержание

CSS media тип: как загрузить CSS для мобильных устройств?

С этим кодом:

<link rel="stylesheet"
      type="text/css"
      href="media/css/mobile.css"
      media="handheld" />
<link rel="stylesheet"
      type="text/css"
      href="media/css/screen.css"
      media="screen" />

на моем N78 браузер nokia по умолчанию и opera mini загружают screen.css вместо mobile.css .
Что я упускаю из виду?

css mobile opera-mini media-type Поделиться Источник Andrea Ambu     08 августа 2009 в 12:28

3 Ответа



19

Nokia N78 использует браузер S60, который читает только "screen" таблиц стилей. Он не будет читать "handheld". Он не поддерживает запрос media. Вместо того, чтобы пытаться напечатать все здесь, посмотрите на эту статью, и вы решите проблему - http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

Поделиться dalizard     08 августа 2009 в 12:39



9

Использование iPhone в качестве примера:

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

Я понятия не имею, для каких браузеров/устройств это работает и не работает. Единственное мобильное устройство, которое я разработал, - это iPhone. Но я уверен, что вы можете попробовать сделать это с помощью своей nokia.

Подробнее о media запросах

Поделиться Ryan Florence     08 августа 2009 в 18:59



1

Opera Mini использует экран типа media, потому что он лучше всего соответствует его поведению и возможностям. Однако он будет использовать ручные таблицы стилей, если вы переключитесь в режим мобильного просмотра. Дополнительную информацию смотрите в разделе взгляд разработчика на Opera Mini 5 beta 2 .

Поделиться Gerald Senarclens de Grancy     19 мая 2010 в 10:52


Похожие вопросы:


Запрос CSS Media для печати, мобильных устройств и настольных компьютеров

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


2 CSS файлов, 1 для мобильных устройств и 1 для компьютеров

У меня есть 2 CSS файлов, 1 для мобильных устройств и 1 для компьютеров, ноутбуков.. Увидеть ниже: http://www.townhouseistanbul.com/skin/kevintimmer/css/tablet.css...


Как использовать запросы media для мобильных устройств и настольных компьютеров?

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


Лучший способ определить стили CSS для мобильных устройств?

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


@media экран не рендеринг для мобильных устройств

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


оптимизация CSS 720*1280 мобильных устройств

Я пытаюсь оптимизировать свою веб-страницу для мобильных устройств 720*1200: Моя страница Он отлично работает на устройствах 320*480 и 480*800, но не на 720*1200. Загрузка страницы увеличена, так...


Какой процент мобильных браузеров поддерживает запросы CSS media?

Я разрабатываю новый сайт с поддержкой мобильных устройств, и я хочу попробовать использовать адаптивный дизайн/адаптивный дизайн/CSS media запросов. Мне интересно, есть ли недавний отчет о...


css для мобильных устройств, но для ландшафтного режима?

Я использую специальный css для мобильных устройств, но установите max-device-width на 480 пикселей (я не знаю, является ли это стандартным размером или нет). однако, когда мой экран находится в...


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

Я создаю новый веб-сайт. Мое намерение-создать одну страницу для настольных и мобильных устройств и установить стили в зависимости от устройства (мобильного или настольного). Я знаю, что могу...


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

У меня есть прокладка для тела (рабочего стола), но мне нужно изменить ее, чтобы она соответствовала мобильным телефонам это и есть тело css: .column{ float:left; width:50%; max-height:376px;...


Использование CSS-медиазапросов для создания динамичных веб-сайтов

Единый дизайн для экранов всех размеров

Photo of Jeff Bail

Джефф Бэйл
Опубликовано 26.06.2013

Comments

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

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

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

Предварительные условия

Примеры программного кода в этой статье предназначены для исполнения в веб-браузерах, которые поддерживают технологию CSS media queries, в том числе в браузерах Mozilla Firefox, Apple Safari, Google Chrome и Opera. В разделе Ресурсы приведена ссылка на полный список браузеров для ПК и мобильных устройств, поддерживающих технологию CSS3 media queries.

Динамичный дизайн

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

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

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

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

Листинг 1. Использование медиатипов
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

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

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

Медиазапросы, введенные в спецификации CSS3 (CSS version 3), расширяют функции медиатипов и допускают применение в таблицах стилей более точных правил отображения. Медиазапрос (Media query)— это выражение, которое может иметь значение True (истина) или False (ложь). В случае значения True содержащиеся в этом выражении стили будут использоваться, в случае значения False — не будут. Эта простая логика — которая благодаря использованию выражений приобретает весьма мощные возможности — обеспечивает разработчику дополнительную гибкость благодаря применению специальных правил отображения для сценариев конкретного дизайна.

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

Листинг 2. Правило медиазапроса
@media all and (min-width: 800px) { ... }

Согласно разметке в листинге 2, для всех медиатипов (экран, печать и т. д.), у которых минимальная ширина экрана по горизонтали составляет 800 пикселей, используются следующие CSS-правила. Эти правила будут применяться в тех местах примера, где находится многоточие. В данном медиазапросе:

  • @media all— медиатип, который в данном случае диктует применение данного CSS-кода ко всем медиатипам.
  • (min-width:800px)— выражение, содержащее медиазапрос, который дает указание браузеру применять следующий CSS-код только в том случае, если минимальная ширина экрана этого браузера составляет 800 пикселей.

Обратите внимание, что в листинге 2 ключевые слова all и and могут быть пропущены. Если медиазапрос применяется ко всем медиатипам, то слово

all может быть пропущено. Завершающее слово and также является необязательным. После переписывания этого медиазапроса с использованием краткого синтаксиса он будет выглядеть следующим образом (см. листинг 3).

Листинг 3. Краткий синтаксис
@media (min-width:800px) { ... }

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

Листинг 4. Сложное выражение
@media (min-width:800px) and (max-width:1200px) { ... }

В своем выражении вы можете использовать любое количество условий and. К примеру, если вы хотите добавить другое условие, осуществляющее проверку портретной ориентации экрана, вам достаточно добавить еще одно ключевое слово and (и), за которым будет следовать дополнительный медиазапрос orientation (см. листинг 5).

Листинг 5. Использование ключевого слова
and
@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

Медиазапрос в листинге 5 активируется только в том случае, если минимальная ширина составляет 800 пикселей, максимальная ширина составляет 1200 пикселей, а ориентация является портретной (обычно ориентация имеет смысл только для смартфонов и планшетов, которые несложно повернуть из портретного режима в альбомный и наоборот). Если какое-либо из этих условий будет иметь значение False, то данное правило медиазапроса не будет применено.

Антонимом ключевого слова and является ключевое слово or (или). Подобно слову and, оно группирует условия в сложное выраже. Выражение с ключевым словом or, разделяющим два условия, будет иметь значение True, если хотя бы одно из этих условий имеет значение True (см. листинг 6).

Листинг 6. Ключевое слово or
@media (min-width:800px) or (orientation:portrait) { ... }

Данное правило будет применено в том случае, если ширина будет не менее 800 пикселей или если ориентация будет портретной.

Еще одним полезным ключевым словом медиазапросов в вашем арсенале является слово not. Будучи помещенным в начало медиазапроса, слово not инвертирует результат. Другими словами, если без ключевого слова not какой-либо запрос имел значение True, то теперь он будет иметь значение False. Соответствующий пример показан в листинге 7.

Листинг 7. Использование ключевого слова not
@media (not min-width:800px) { ... }

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

Имеется несколько медиафункций, в том числе width, color и grid, которые можно использовать в медиазапросах. В данной статье не описываются все возможные медиафункции. Полный список этих функций содержится в документации организации World Wide Web Consortium (W3C) по медиазапросам (см. раздел Ресурсы).

Для проектирования динамичных веб-сайтов достаточно знать лишь несколько медиафункций: orientation (ориентация), width (ширина) и height (высота). Orientation – это простая медиафункция, которая может иметь значение portrait или landscape. Эти значения соответствуют положению телефона или планшета в руке пользователя, что позволяет разработчику оптимизировать контент для обоих вышеуказанных формфакторов. Считается, что экран находится в портретном режиме, если высота превышает длину, и в альбомном режиме, если ширина больше высоты. В листинге 8 показан пример использования функции orientation.

Листинг 8. Медиазапрос с функцией orientation
@media (orientation:portrait) { ... }

Функции height и width ведут себя аналогично; обе допускают использование префиксов min- и max-. В листинге 9 показан правильно построенный медиазапрос с использованием этих функций.

Листинг 9. Медиазапрос с функциями height и width
@media (min-width:800px) and (min-height:400px) { ... }

Медиафункции width и height можно использовать без префикса min- или max- (см. листинг 10).

Листинг 10. Медиафункции без префиксов min- и max-
@media (width:800px) and (height:400px) { ... }

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

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

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

Медиазапрос для смартфона в альбомном режиме: @media (min-width: 321px) { ... }

Медиазапрос для смартфона в портретном режиме: @media (max-width: 320px) { ... }

Медиазапрос для Apple iPad в альбомном режиме: @media (orientation: landscape) { ... }

Медиазапрос для iPad в альбомном режиме: @media (orientation: portrait) { ... }

Обратите внимание на использование медиафункции orientation для iPad и на использование медиафункции width для Apple iPhone. Это объясняется следующим обстоятельством. К сожалению, iPhone не поддерживает медиафункцию orientation. Для имитации определения ориентации необходимо использовать функцию width. Для получения дополнительной информации о наиболее употребительных медиазапросах обратитесь к разделу Ресурсы.

Поддержка технологии SASS (Syntactically Awesome Style Sheets) встроена в инфраструктуру Ruby on Rails, что способствует популярности SASS и ее все более широкому распространению в сообществе веб-разработчиков. Детальное рассмотрение SASS выходит за рамки данной статьи, я лишь изложу основы использования медиазапросов в таблицах стилей на базе SASS. Для получения дополнительной информации о SASS обратитесь к разделу Ресурсы.

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

Листинг 11. Вложенный медиазапрос
#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

В результате компиляции примера в листинге 11 получится код, показанный в листинге 12.

Листинг 12. Результат компиляции
#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

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

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

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

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

Поддержка веб-браузерами

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

  • Хорошая новость состоит в том, что большинство современных браузеров (включая браузеры для смартфонов) поддерживает CSS-медиазапросы.
  • Плохая новость состоит в том, что в Microsoft Windows® Internet Explorer® версии 8 поддержка медиазапросов все еще отсутствует.

С точки зрения большинства профессиональных веб-разработчиков это означает, что для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript.

Реализация polyfill-скрипта с помощью respond.js

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

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

Respond.js — это один из множества доступных polyfill-скриптов с открытым исходным кодом для поддержки медиазапросов. Если respond.js не удовлетворяет ваши потребности, будет несложно найти альтернативные варианты.

Заключение

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

Ресурсы для скачивания
Похожие темы

Подпишите меня на уведомления к комментариям

Наиболее рекомендуемый запрос CSS Media для мобильных телефонов и планшетных устройств

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

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (min-device-width : 768px) {
    /*style*/
}

Спасибо!

css media-queries Поделиться Источник realnsleo     11 ноября 2016 в 07:01

1 Ответ



5

Это будет очень кстати...

 @media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
    @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
    @media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
    @media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
    @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
    @media (min-width:1281px) { /* hi-res laptops and desktops */ }

Поделиться Logeshwaran     11 ноября 2016 в 07:05


Похожие вопросы:


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

Я создаю мобильное приложение, использую запрос media: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Your Styles */ } /* Smartphones (landscape)...


css media запрос для обработки новых мобильных телефонов с высоким разрешением при игнорировании планшетов

Согласно моим исследованиям; новое постановление интеллектуального портрета телефонов до 800 пикселей таблетки свинцового сурика разрешение портретной 600 пикселей Теперь я пытаюсь использовать...


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

Я понимаю концепцию использования @media-queries в создании адаптивных веб-сайтов, и как единый веб-сайт работает на разных platforms...but как лучше всего создать отдельный или вторичный веб-сайт ,...


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

Вуз У меня есть страница mvc, которая имеет некоторые css для ipad и для мобильных устройств. Запрос для ipad (@media только экран и (min-device-width: 768px) и (max-device-width: 1024px)) работает...


@media экран не рендеринг для мобильных устройств

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


Обнаружение мобильных устройств - и планшетных устройств

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


Media запрос для мобильных устройств с высоким разрешением 1080px (Xperia Z и т. д)

Я пытаюсь разобраться с media запросами для разных устройств. Я попробовал свой новый Sony Xperia Z mobile и отображает в полномасштабном формате сайта из-за высокого разрешения. Как добавить запрос...


Каковы наилучшие запросы CSS Media, которые можно использовать в качестве универсальных для наиболее распространенных типов устройств?

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


media запрос для iPad и других планшетных устройств

Я пытаюсь написать запрос media, чтобы сайт выглядел правильно в iPad. У меня есть все файлы device css как mobile.css. И под mobile.css вот как я делаю некоторые изменения. Ниже приведен фрагмент...


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

У меня есть класс, для которого запрос media выглядит следующим образом: @media only screen and (max-width: 374px) { width: 62px; } @media only screen and (max-height: 413px) and (min-width: 375px)...


Медиа-запросы | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 10.0+ 4.0+ 3.6+ 2.0+ 2.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

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

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

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

Логические операторы, применяемые в медиа-запросах

and

Логическое И. Указывается для объединения нескольких условий.

Пример. Стиль для всех цветных устройств

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

not

Логическое НЕ. Указывается для отрицания условия.

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

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

Оператор not имеет низкий приоритет и оценивается в запросе последним, поэтому выражение

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

следует понимать как

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

а не

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

only

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

Пример. Стиль для новых браузеров

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

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

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

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

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

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

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

Большинство функций содержат приставку 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 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное. В примере 1 показана такая проверка.

Пример 1. Стиль для цветных устройств

@media screen and (color) { /* Для цветных экранов */
  body { background: #fc0; }
}
@media screen and (min-color:3) { /* Минимум 512 цветов */
  body { background: #ccc; }
}

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

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

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

Пример 2. Цветной дисплей

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

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

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число/целое число

Определяет соотношение сторон экрана устройства. Значение указывается в виде двух целых чисел разделяемых между собой слэшем (/). В примере 3 показано, как установить стиль для экранов с соотношением сторон 16:9 и более.

Пример 3. «Киношное» соотношение

@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)

Тип носителя: все кроме speech
Значение: размер

Определяет всю доступную ширину экрана устройства или печатной страницы. В примере 4 в зависимости от разрешения монитора устанавливается ширина слоя. Так, для значения 1280 пикселов ширина макета задаётся как 1100px.

Пример 4. Ширина макета

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина макета</title>
  <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;}
   }
  </style>
 </head>
 <body>
  <div>
   Диабаз, формируя аномальные геохимические ряды, сменяет известняк, 
   образуя на границе с Западно-Карельским поднятием своеобразную систему грабенов.
  </div>
 </body>
</html>

grid

Тип носителя: all
Значение: нет

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

Если вам требуется форматировать текст, не указывайте его размер в пикселах, для подобных устройств используется единица em (пример 5).

Пример 5. Размер букв

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Стиль для бабушкофона</title>
  <style>
   @media handheld and (grid) and (max-width: 15em) {
     body { font-size: 2em; }
   }
  </style>
 </head>
 <body>
  <p>Привет! Как дела? Как сажа бела?</p>
 </body>
</html>

height (min-height, max-height)

Тип носителя: все кроме speech
Значение: размер

Высота отображаемой области.

monochrome (min-monochrome, max-monochrome)

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: целое число

Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксел. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.

Пример 6. Стиль для принтера

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

orientation

Тип носителя: handheld, print, projection, screen, tty, tv
Значение: landscape | portrait

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

В примере 7 устанавливается разная фоновая картинка в случае альбомной (landscape) или портретной ориентации (portrait).

Пример 7. Использование ориентации устройства

@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)

Тип носителя: handheld, print, projection, screen, tv
Значение: разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр)

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

Пример 8. Разрешение принтера

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

scan

Тип носителя: tv
Значение: interlace | progressive

Определяет тип развертки телевизора — череcстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
 </head>
 <body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток, 
  в то время как значения максимумов изменяются в широких пределах. </p>
 </body>
</html>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *