深入了解CSS3媒体

css3 媒体 Media Type 媒体类型 媒体类型是CSS2中一个非常有用的属性。通过媒体类型可以对不同的设备指定不同的样式。 W3C共列出十种媒体类型，如表：

值 设备类型 all 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打字机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 TV 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端 其中screen，all，print为最常见的三种媒体类型。

媒体类型的引用方法 link方法 ：在 标签引用样式的时候引入媒体类型，通过media属性指定不同的媒体类型。

xml方法 ：与link引入媒体类型类似，也是通过media属性来指定。

@import方法 ： @import 是用来引用样式文件的方法之一，同样可以用来引用类型。 @import 引入媒体类型主要有两种方式。

一种是在样式文件中通过 @import 调用另一个文件；

@import url(style.css) screen; 另一种是在标签 中引入。

@import url(style.css) screen; @media方法 ： @media 是CSS3中新引进的特性，称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与 @import 类似，也有两种类型。

一种是在样式文件中通过 @media 引用媒体类型；

@media screen{ 选择器{/*样式*/} } 另一种是在标签 中引入。

@media screen{ 选择器{/*样式*/} } 以上四种方法都可以引用媒体类型，推荐使用第一种与第四种。

Media Query媒体特性 媒体特性是CSS3对媒体类型的增强版。 W3C共列出13种CSS3中常用的特性，如表：

属性 值 Min/Max 描述 color 整数 Yes 每种色彩的字节数 color-index 整数 Yes 色彩表中的色彩数 device-aspect-ratio 整数/整数 Yes 宽高比例 device-height Length Yes 设备屏幕的输出高度 device-width Length Yes 设备屏幕的输出宽度 grid 整数 No 是否基于栅格的设备 height Length Yes 渲染页面的高度 monochrome 整数 Yes 单色帧缓冲器中每像素字节 resolution 分辨率(dpi/dpcm) Yes 分辨率 scan Progressive interlaced No Tv媒体类型的扫描方式 width Length Yes 渲染界面的宽度 orientation portrait/landsscape No 横屏或竖屏 Media Query使用方法 @media 媒体类型 and (媒体特性){/*样式*/} 使用Media Query时必须要使用 @media 开头，然后指定媒体类型，随后是指定媒体特性。

最大宽度 max-width

max-width是媒体特性中最常用的一个特性，意思是指媒体类型小于或等于指定的宽度时，样式生效。

@media screen and (max-width:480px){ p{ width:400px; } } 意思是当屏幕小于或等于480px时，p的宽度被重置为400px。

最小宽度 min-width

min-width与max-width相反，即媒体类型大于或等于指定宽度时，样式生效。

@media screen and (min-width:900px){ p{width:900px;} } 当最小宽度等于或大于900px时，p的宽度重置为900px

多个媒体特性使用

Media Query可以使用关键词“ and ”将多个媒体特性结合在一起。

@media screen and (min-width:400px) and (max-width:600px){ p{ background:red; } } 当屏幕宽度在400px~600px时，p的背景色变为红色。

设备屏幕的输出宽度 Device width

还可以根据屏幕尺寸设置相应的样式

样式适用于最大宽度为500px，这里的max-device-width所指的是实际分辨率，也就是指可视面积分辨率。

not 关键词

关键词not用来排除某种制定的媒体类型，也就是说对后面的表达式执行取反操作。

@media not print and (max-widht:1200px){/*样式*/} 样式代码将被使用在除了打印设备和屏幕宽度小于1200px的所有设备。

only 关键词

only用来指定某种特定的媒体类型，可以排除不支持媒体查询(Media Query)的浏览器。only很多时候是用来对不支持Media query却支持Media Type的设备隐藏样式表。因此支持媒体特性的设备正常调用样式，此时就当only不存在；不支持媒体特性但支持媒体类型的设备，就不会读取样式，因为先读取的是only而不是screen；不支持Media Query的浏览器，不论是否支持only，样式都不会被采用。

CSS3 媒体特性完。

值	设备类型
all	所有设备
Braille	盲人用点字法触觉回馈设备
Embossed	盲文打字机
Handheld	便携设备
Print	打印用纸或打印预览视图
Projection	各种投影设备
Screen	电脑显示器
Speech	语音或音频合成器
TV	电视机类型设备
Tty	使用固定密度字母栅格的媒介，比如电传打字机和终端