css3 媒体media type 媒体类型媒体类型是css2中一个非常有用的属性。通过媒体类型可以对不同的设备指定不同的样式。
w3c共列出十种媒体类型，如表：
值设备类型
all 所有设备
braille 盲人用点字法触觉回馈设备
embossed 盲文打字机
handheld 便携设备
print 打印用纸或打印预览视图
projection 各种投影设备
screen 电脑显示器
speech 语音或音频合成器
tv 电视机类型设备
tty 使用固定密度字母栅格的媒介，比如电传打字机和终端
其中screen，all，print为最常见的三种媒体类型。
媒体类型的引用方法link方法：在<link>标签引用样式的时候引入媒体类型，通过media属性指定不同的媒体类型。
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
xml方法：与link引入媒体类型类似，也是通过media属性来指定。
<?xml-stylesheet type="text/css" media="screen" href="style.css">
@import方法：@import是用来引用样式文件的方法之一，同样可以用来引用类型。@import引入媒体类型主要有两种方式。
一种是在样式文件中通过@import调用另一个文件；
@import url(style.css) screen;
另一种是在标签<style>中引入。
<style>     @import url(style.css) screen; </style>
@media方法：@media是css3中新引进的特性，称为媒体查询。在页面中可以通过这个属性来引入媒体类型。与@import类似，也有两种类型。
一种是在样式文件中通过@media引用媒体类型；
@media screen{     选择器{/*样式*/} }
另一种是在标签<style>中引入。
<style>     @media screen{         选择器{/*样式*/}     } </style>
以上四种方法都可以引用媒体类型，推荐使用第一种与第四种。
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
还可以根据屏幕尺寸设置相应的样式
<link rel="stylesheet" media="screen and (max-device-width:500px)" href="style.css" />
样式适用于最大宽度为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，样式都不会被采用。
<link rel="stylesheet" media="only screen and (max-device-width:1200px)" href="style.css">
css3 媒体特性完。
以上就是深入了解css3媒体的详细内容。