@media

概述

@media CSS at-rule 将一组嵌套语句关联在由大括号分隔的CSS块中，使用由media query定义的一个条件。@media 规则不仅可以在一个CSS的顶层使用，也可以在任何CSS conditional-group at-rule中使用。

@media 规则可以通过CSS对象模型接口 CSSMediaRule 访问.

语法

@media <media-query-list> {
  <group-rule-body>
}
where 
<media-query-list> = <media-query>#
where 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
where 
<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>
where 
<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>
where 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
where 
<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>
where 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

<media-query> 由一个可选的媒体类型加上若干媒体特性组成。

媒体类型

all

适用于所有设备。

print

为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。

screen

主要适用于彩色的电脑屏幕

speech

解析speech这个合成器. 注意: CSS2已经有一个相似的媒体类型叫aural.可以看以下附录

媒体特性

针对每个浏览器和不同设备都有各自的媒体特性

示例

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

规范

浏览器支持

相关链接

• Media queries
• The CSSOM CSSMediaRule associated with this at-rule.