Адаптивная верстка: media queries

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.


The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

@media screen and (min-width: 480px) {  body {     background-color: lightgreen;  }}

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

@media screen and (min-width: 480px) {  #leftsidebar {width: 200px; float: left;}  #main {margin-left: 216px;}}

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {  CSS-Code;}

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the type will be implied.

You can also have different stylesheets for different media:

<link rel=»stylesheet» media=»mediatype and|not|only (expressions)» href=»print.css»>

Syntax

The media query syntax is described in terms of the CSS2 grammar. As such, rules not defined here are defined in CSS2. The production defined below replaces the production from CSS2.

media_query_list
 : S* * ]?
 ;
media_query
 : ? S* media_type S* *
 | expression *
 ;
media_type
 : IDENT
 ;
expression
 : '(' S* media_feature S* ? ')' S*
 ;
media_feature
 : IDENT
 ;

COMMENT tokens, as defined by CSS2, do not occur in the grammar (to keep it readable), but any number of these tokens may appear anywhere between other tokens.

The following new definitions are introduced:

L  l|\\0{0,4}(4c|6c)(\r\n|)?|\\l
Y  y|\\0{0,4}(59|79)(\r\n|)?|\\y

The following new tokens are introduced:

{O}{N}{L}{Y}      {return ONLY;}
{N}{O}{T}         {return NOT;}
{A}{N}{D}         {return AND;}
{num}{D}{P}{I}    {return RESOLUTION;}
{num}{D}{P}{C}{M} {return RESOLUTION;}

is to be added to the CSS2 production.

CSS style sheets are generally case-insensitive, and this is also the case for media queries.

In addition to conforming to the syntax, each media query needs to use media types and media features according to their respective specification in order to be considered conforming.

Only the first media query is conforming in the example below because the «example» media type does not exist.

3.1. Error Handling

For media queries that are not conforming user agents need to follow the rules described in this section.

  • Unknown media types. Unknown media types evaluate to false. Effectively, they are treated identically to known media types that do not match the media type of the device.

    The media query «» will evaluate to false, unless is actually a supported media type. Similarly, «» will evaluate to true.

    Unknown media types are distinct from media types that do not actually match the IDENT production. Those fall under the malformed media query clause.

  • Unknown media features. User agents are to represent a media query as «» when one of the specified media features is not known.

    In this example, the first media query will be represented as «» and evaluate to false and the second media query is evaluated as if the first had not been specified, effectively.

    Is represented as «» because the ‘’ feature does not accept the ‘’ prefix.

  • Unknown media feature values. As with unknown media features, user agents are to represent a media query as «» when one of the specified media feature values is not known.

    The media query specifies an unknown value for the ‘’ media feature and is therefore represented as «».

    This media query is represented as «» because negative lengths are not allowed for the ‘’ media feature:

  • Malformed media query. User agents are to handle unexpected tokens encountered while parsing a media query by reading until the end of the media query, while observing of (), [], {}, «», and », and correctly handling escapes. Media queries with unexpected tokens are represented as «».

    The following is an malformed media query because having no space between ‘’ and the expression is not allowed. (That is reserved for the functional notation syntax.)

    Media queries are expected to follow the error handling rules of the host language as well.

    … will not apply because the semicolon terminates the rule in CSS.

References

Normative references

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

Other references

Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
Ian Hickson. HTML5. 29 March 2012. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2012/WD-html5-20120329/
G. Klyne; L. McIntyre. Content Feature Schema for Internet Fax. March 1999. Internet RFC 2531. URL: http://www.ietf.org/rfc/rfc2531.txt
James Clark; Simon Pieters; Henry S. Thompson Associating Style Sheets with XML documents 1.0 (Second Edition) 28 October 2010. W3C Recommendation. URL: http://www.w3.org/TR/2010/REC-xml-stylesheet-20101028/

Units

The units used in media queries are the same as in other parts of CSS. For example, the pixel unit represents CSS pixels and not physical pixels.

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the ‘’ unit is relative to the initial value of ‘’.

6.1. Resolution

The ‘’ and ‘’ units describe the resolution of an output device, i.e., the density of device pixels. Resolution unit identifiers are:

dpi

dots per CSS ‘’

dpcm
dots per CSS ‘’

In this specification, these units are only used in the ‘’ media feature.

Media Query в CSS

Последнее обновление: 03.05.2016

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

Например, некоторые элементы могут

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

<html>
 <head>
  <title>Адаптивная веб-страница</title>
  <link media="handheld" rel="stylesheet" href="mobile.css">
  <link media="screen" rel="stylesheet" href="desktop.css">
 </head>
 <body>
 ......................

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

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

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

<html>
 <head>
  <title>Адаптивная веб-страница</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="desctop.css" />
  <link rel="stylesheet" type="text/css" media="(max-device-width:480px)" href="mobile.css" />
 </head>
 <body>
 ................................

Значение атрибута media говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.


С помощью ключевого слова and можно комбинировать условия, например:

<link rel="stylesheet" type="text/css" media="(min-width:481px) and (max-width:768px)" href="mobile.css" />

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

С помощью директивый @import можно определить один css-файл и импортировать в него стили для определенных устройств:

@import url(desctop.css);
@import url(tablet.css) (min-device-width:481px) and (max-device-width:768);
@import url(mobile.css) (max-device-width:480px);

Также можно не разлелять стили по файлам, а использовать правила CSS3 Media Query в одном файле css:

body {
	background-color: red;
}
/*Далее остальные стили*/
@media (max-device-width:480px){
	body {
		background-color: blue;
	}
	/*Далее остальные стили*/
}

Применяемые функции в CSS3 Media Query:

  • aspect-ratio: отношение ширины к высоте области отображения (браузера)

  • device-aspect-ratio: отношение ширины к высоте экрана устройства

  • max-width/min-width и max-height/min-height: максимальная и минимальная ширина и высота области отображения (браузера)

  • max-device-width/min-device-width и max-device-height/min-device-height: максимальная и минимальная ширина и высота экрана мобильного устройства

  • orientation: ориентация (портретная или альбомная)

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

/*Стили для портретной ориентации*/
@media only screen and (orientation: portrait){

}
/*Стили альбомной ориентации*/
@media only screen and (orientation: landscape){

}

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
        <title>Адаптивная веб-страница</title>
		
		<style>
		body {
			background-color: red;
		}
		/* для планшетов и фаблетов */
		@media (min-width: 481px) and (max-width:768px) {
			body {
				background-color: green;
			}
		}
		/* для декстопов */
		@media (min-width:769px) {
			body {
				background-color: blue;
			}
		}
</style>
    </head>
    <body>
        <h2>Адаптивная веб-страница</h2>
    </body>
</html>

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


И например, на эмуляторе Opera Mobile при эмуляции устройства с шириной в 480 пикселей страница приобретет красный цвет:

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

НазадВперед

Используя width, max-width и margin: auto;

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

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

Элемент имеет ширину 500 пикселей и поле установлено автоматически.

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

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

Элемент <div> элемент имеет максимальную ширину 500 пикселей и поле установлено автоматически.

Совет: Измените размер окна браузера меньше, чем 500 пикселей в ширину, чтобы увидеть разницу между двумя !

Пример двух :

Пример

div.ex1 {    width: 500px;    margin: auto;    border: 3px solid #73AD21;} div.ex2 {    max-width: 500px;    margin: auto;    border: 3px solid #73AD21;}

Mobile First или Desktop First?

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

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

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

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

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

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

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

Background


(This section is not normative.)

HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use different style sheets for screen and print. In HTML4, this can be written as:

Inside a CSS style sheet, one can declare that sections apply to certain media types:

The ‘’ and ‘’ media types are defined in HTML4. The complete list of media types in HTML4 is: ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’. CSS2 defines the same list, deprecates ‘’ and adds ‘’ and ‘’. Also, ‘’ is used to indicate that the style sheet applies to all media types.

Media-specific style sheets are supported by several user agents. The most commonly used feature is to distinguish between ‘’ and ‘’.

There have been requests for ways to describe in more detail what type of output devices a style sheet applies to. Fortunately HTML4 foresaw these requests and defined a forward-compatible syntax for media types. Here is a quote from :

Media queries, as described in this specification, build on the mechanism outlined in HTML4. The syntax of media queries fit into the media type syntax reserved in HTML4. The attribute of HTML4 also exists in XHTML and generic XML. The same syntax can also be used inside in the ‘’ and ‘’ rules of CSS.

However, the parsing rules for media queries are incompatible with those of HTML4 so that they are consistent with those of media queries used in CSS.

HTML5 (at the moment of writing still work in progress) references the Media Queries specification directly and thus updates the rules for HTML.

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

В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.

Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:

@media (min-width: 700px), (orientation: landscape) {}

Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:

@media not screen and (device-width: 800px) {}

Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.

/* Не работает в старых браузерах */
@media only screen and (min-width: 600px) {}

Типы устройств

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

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

/* только для печати */
@media print {
  /* скрыть меню */
  #navigation { display: none; }

  /* начинать каждую новую страницу с заголовка h1 */
  h1 { page-break-before: always; }
}

Media Queries

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

Statements regarding media queries in this section assume the is followed. Media queries that do not conform to the syntax are discussed in the . I.e. the syntax takes precedence over requirements in this section.

Here is a simple example written in HTML:

This example expresses that a certain style sheet () applies to devices of a certain media type (‘’) with certain feature (it must be a color screen).

Here the same media query written in an @import-rule in CSS:

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the «Applies to» line), and all expressions in the media query are true.

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘’ can be left out (along with the trailing ‘’). I.e. if the media type is not explicitly given it is ‘’.

I.e. these are identical:

As are these:

Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘’ keyword expresses a logical AND.

Here is an example of several media queries in a comma-separated list using the an @media-rule in CSS:

If the media query list is empty (i.e. the declaration is the empty string or consists solely of whitespace) it evaluates to true.

I.e. these are equivalent:

The logical NOT can be expressed through the ‘’ keyword. The presence of the keyword ‘’ at the beginning of the media query negates the result. I.e., if the media query had been true without the ‘’ keyword it will become false, and vice versa. User agents that only support media types (as described in HTML4) will not recognize the ‘’ keyword and the associated style sheet is therefore not applied.

The keyword ‘’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘’ as if the ‘’ keyword was not present.

The media queries syntax can be used with HTML, XHTML, XML and the @import and @media rules of CSS.

Here is the same example written in HTML, XHTML, XML, @import and @media:

The specification has not yet been updated to use media queries in the pseudo-attribute.

If a media feature does not apply to the device where the UA is running, expressions involving the media feature will be false.

The media feature ‘’ only applies to visual devices. On an aural device, expressions involving ‘’ will therefore always be false:

Expressions will always be false if the unit of measurement does not apply to the device.

The ‘’ unit does not apply to ‘’ devices so the following media query is always false:

Note that the media queries in this example would have been true if the keyword ‘’ had been added to the beginning of the media query.

To avoid circular dependencies, it is never necessary to apply the style sheet in order to evaluate expressions. For example, the aspect ratio of a printed document may be influenced by a style sheet, but expressions involving ‘’ will be based on the default aspect ratio of the user agent.

User agents are expected, but not required, to re-evaluate and re-layout the page in response to changes in the user environment, for example if the device is tilted from landscape to portrait mode.


С этим читают