Перейти к содержанию

@media

Правило @media в CSS связывает набор операторов, в CSS блок, ограниченный фигурными скобками, с условием, определенным запросом СМИ. Правило @media может быть использовано не только на верхнем уровне CSS, но и внутри любого фрагмента условной группы-правил.

@-правила

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@media <media-query-list> {
    <group-rule-body>
}

где
<media-query-list> = <media-query>#

где
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

где
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

где
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

где
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

где
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

где
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

Типы

all

Подходит для всех устройств.

print

Принтеры.

screen

Предназначен в первую очередь для цветных компьютерных экранов.

speech

Предназначен для синтезаторов речи.

Примечание: CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (tty, tv, projection, handheld, braille, embossed, aural), но они устарели в Media Queries 4 и не рекомендуется к использованию.

Спецификации

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

Can I Use css-media-interaction? Data on support for the css-media-interaction feature across the major browsers from caniuse.com.

Can I Use css-media-resolution? Data on support for the css-media-resolution feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@media print {
    body {
        font-size: 10pt;
    }
}
@media screen {
    body {
        font-size: 13px;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        line-height: 1.4;
    }
}

Комментарии