media-type，media-query

media type属于css2的规范，用来针对不同的设备，设置不同的样式，让其更符合该设备的渲染习惯，优化输出效果。

media query属于css3的规范，用来根据屏幕的大小、方向（横、/竖）、比值（宽/高，eg:16:9）、色值等，控制不同的样式，实现跨平台。

二者组合可以提供强大的跨平台、跨设备的解决方案。

基本用法：

    前端观察

注意几点：

    media type 和 dedia query都是作为 属性media的值来使用；2者不一定一起组合使用，可以各自单独使用。

    media type 默认值是 all。

    media query 必须用小括号括起来。

    media type之间必须用逗号隔开。eg:

media="screen, print"

    media的值以 关键字“only”开头的意义(配合media type使用)，eg：

<link rel="stylesheet" href="m.css" media="only screen and (max-device-width: 480px)" />
@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}

这个“only”是css3加的关键字，可以不写，它的作用主要是用来兼容不支持media query的。

按照规范，浏览器只识别用逗号隔开的media type列表值，并且要截去不是数字、字符、连字符的字符，eg：

media="screen, print"

那么识别出的media type值应该是creen和print这两中类型。

如果是这样：

media="screen and (min-width: 401px) and (max-width: 600px)"

那么不支持media query的浏览器识别出的media type就应该是：”screen“。因为在css2里，screen是media type中的一种，所以这个样式就会作用。不幸的是：ie6/7/8会把这个样式忽略掉，为此出现来关键字”only“。

如果是这样：

media="only screen and (min-width: 401px) and (max-width: 600px)"

那么不支持media query的浏览器识别出的media type就应该是：”only“。因为在css2里，only不是media type中的一种，所以这个样式就会直接忽略掉而不起作用。

参考：

    stackoverflow

    adobe