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中的一种,所以这个样式就会直接忽略掉而不起作用。
参考: