The understanding of CSS @media

Css2 's @media

CSS2 inside Although support @media attribute, but can achieve less function, generally only used for printing when the special definition of CSS.
Syntax: @media smedia {srules}
Description
Smedia: Specifies the device name. See Appendix: Device Types
Srules: Style sheet definition
Specifies a style sheet rule for the specified device type. See the link object's media properties (attributes).
Example:

1 2 3 4 5 6 7 8 9

// 设置显示器用字体尺寸@media screen{BODY {font-size:12pt; }}// 设置打印机用字体尺寸@media print{@import "print.css"BODY {font-size:8pt;}}

CSS3 's @media

The @media property has evolved into a media queries (query/Match) in CSS3, and in CSS3, you can use query statements to match various types of screens.
Syntax: @media: {srules}
Value:

1 2	<sMedia>：指定设备名称。{sRules}：样式表定义。

Description
Determine the type of medium (object) to achieve different presentation. This feature allows CSS to work more precisely on different media types, different conditions in the same medium (resolution, Number of colors, and so on).

on Geneva Geneva Geneva to . - , the Ten One A -

media_query: [only | not]?  [ and  ]*expression: (  [:]?) all |  aural |  braille |  handheld |  print |  projection |  screen |  tty |  tv |  embossed media_feature: 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| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio| color | min-color | max-color| color-index | min-color-index | max-color-index| monochrome | min-monochrome | max-monochrome| resolution | min-resolution | max-resolution| scan | grid

Analytical
Media_query: Media query criteria. Includes only and these logical judgments that often appear within the program.
expression: expressions. Match or not of media features.
media_type: The type of media. Include a lot.
media_feature: The characteristics of the media. It is commonly used to judge the minimum maximum width of min-width max-width.

DEMO (recommended in Chrome or Firefox open, open, press the shortcut key "Ctrl" + "+", "Ctrl" + "-" to zoom the page):

CSS Code

1 2 3 4 5

body{background:blue;}/*宽度500px-800px之间+高度100px-400px之间 蓝色*/ @media   screen and ( max-width : 500px ) {body{ background : green ;} /* width is less than 500px green */ @media   screen and ( min-width : 800px ) {body{ background : red ;} /* width greater than 800px red */ @media   screen and ( max-height : ) {Body { background :yellow;}} /* height less than 100px yellow */ @media screenand (min-height:400px){body{background:pink;}}/*高度大于400px时 粉色*/

HTML code

1 2 3 4 5 6

<p>效果演示，请缩小/扩大浏览器的窗口大小注意背景色的变化。逻辑如下：</p><p>/*宽度500px-800px之间+高度100px-400px之间 蓝色*/</p><p>/*宽度小于500px时 绿色*/</p><p>/*宽度大于800px时 红色*/</p><p>/*高度小于100px时 黄色*/</p><p>/*高度大于400px时 粉色*/</p>

The understanding of CSS @media