1, head tag introduced
//语法： @media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets:
<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)"> The above is less than the width of the browser equal 800px, application styleA.
2, css introduced
@media screen and (max-device-width:960px){
body{background:red;}
}In the device above the screen width is less css style for application 960px.
Mix:
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}It represents a width of the browser or less than or equal to 960px 1200px use style.
3, Media summary of all parameters
width: the width of the visual browser.
height: browser visual height.
device-width: the width of the device screen.
device-height: the height of the device's screen.
orientation: detecting apparatus currently in horizontal or vertical state.
aspect-ratio: the ratio of the width detector visual browser and height. (Example: Aspect-ratio: 16/9)
Device-Aspect-ratio: the ratio of the width and height of the detection apparatus.
color: the color of the digits detected. (For example: min-color: 32 will detect whether the device has 32-bit color)
Color-index: the index color inspection apparatus in the color table, he can not be a negative value.
monochrome: bits per pixel monochrome frames detection buffer region. (This is too advanced, it is estimated we rarely used to)
Resolution: Resolution test screen or printer. (For example: min-resolution: 300dpi or min-resolution: 118dpcm).
grid: detecting the output device is a grid or bitmaps.
| value | description |
|---|---|
| aspect-ratio | Definition of the output device page visible region of width to height ratio of |
| color | Defines the number of output devices of each group of color originals. If the device is not a color, then the value is equal to 0 |
| color-index | Defines the number of entries in the color look-up table in the output device. If you do not use a color lookup table, the value is equal to 0 |
| device-aspect-ratio | Output devices visible screen definition width to height ratio. |
| device-height | Screen definition output device highly visible. |
| device-width | Visible screen definition output device width. |
| grid | Used to query whether the output device using a grid or lattice. |
| height | Definition of the output device highly visible area of the page. |
| max-aspect-ratio | Visible screen definition output device width to height ratio of the maximum. |
| max-color | Define the maximum number of output devices of each group of color originals. |
| max-color-index | It defines the maximum number of entries in the color look-up table in the output device. |
| max-device-aspect-ratio | Visible screen definition output device width to height ratio of the maximum. |
| max-device-height | Screen definition output devices visible to the maximum height. |
| max-device-width | Screen definition maximum visible width of the output device. |
| max-height | The maximum height of the visible area of the page is defined in the output device. |
| max-monochrome | The maximum number is defined in a monochrome original monochrome frame buffer included in each pixel. |
| max-resolution | The maximum resolution of the device is defined. |
| max-width | Definition of the output device in the visible region of the maximum width of a page. |
| min-aspect-ratio | Definition of the output device page visible region minimum ratio of width to height. |
| min-color | Each group of output devices defined minimum number of color originals. |
| min-color-index | Defines the minimum number of entries in the color look-up table in the output device. |
| min-device-aspect-ratio | An output device visible screen definition minimum ratio of width to height. |
| min-device-width | Screen definition minimum visible width of the output device. |
| min-device-height | Minimum screen output apparatus defined highly visible. |
| min-height | Definition of the output device in the visible region of the minimum height of the page. |
| min-monochrome | The minimum number of monochrome originals are defined in a single color per pixel frame buffer included |
| min-resolution | Minimum resolution defined devices. |
| min-width | Definition of the output device in the visible region of the minimum width of a page. |
| monochrome | Define a number of monochrome original monochrome frame buffer for each pixel included. If the device is not monochromatic, the value is equal to 0 |
| orientation | Definition of the output device in the visible region of the height of the page is greater than or equal to a width (vertical screen). |
| resolution | 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定义电视类设备的扫描工序。 |
| width | 定义输出设备中的页面可见区域宽度。 |
(max-width:599px)
(min-width:600px)
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比4、媒体类型
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| aural | 已废弃。用于语音和声音合成器 |
| braille | 已废弃。 应用于盲文触摸式反馈设备 |
| embossed | 已废弃。 用于打印的盲人印刷设备 |
| handheld | 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话 |
| 用于打印机和打印预览 | |
| projection | 已废弃。 用于投影设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等。 |
| speech | 应用于屏幕阅读器等发声设备 |
| tty | 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备 |
| tv | 已废弃。 用于电视和网络电视 |
5、关键字
and
not：该关键字是用来排除某种制定的媒体类型
only：用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。
6、参考文档：
http://www.w3cplus.com/content/css3-media-queries
