这样上面的media query只有在可视窗口（viewport）最小是700px并且是横向显示的时候才返回true，如果还想进一步限制设备为tv可以这样
@media tv and (min-width: 700px) and (orientation: landscape) { … }
逗号分隔的列表
在使用逗号分隔的查询列表中每个查询都被视为一个独立的查询，任何本查询中的作用符不影响其他查询，只要有一个查询返回true，style就会被作用。
举例来说，如果希望特定style在viewport最小宽度为700px或手持式设备上生效，可以这么写：
@media (min-width: 700px), handheld and (orientation: landscape) { … }not
not操作符作用域整个查询，所以只有在整个查询返回false的情况下使用not后才会返回true。当使用逗号分隔的列表的时候not作用于邻近的查询，而不会作用于每个查询
@media not all and (monochrome) { … }
查询其实会这样起作用
@media not (all and (monochrome)) { … }
而不是这样
@media (not all) and (monochrome) { … }
对于逗号分隔的列表
@media not screen and (color), print and (color)
查询是这样子的
@media (not (screen and (color))), print and (color)only
only操作符用于阻止不支持带有media feature的media queries的浏览器应用特定style
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
media features
说了好多次media feature了，到底有多少个media feature呢
•width：浏览器宽度
•height：浏览器高度
•device-width：设备屏幕分辨率的宽度值
•device-height：设备屏幕分辨率的高度值
•orientation：浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait，否则为landscape。
•aspect-ratio：比例值，浏览器的纵横比.
•device-aspect-ratio：比例值，屏幕的纵横比.
•color：设备使用多少位的颜色值，如果不是彩色设备，值为0
•color-index：色彩表的色彩数
•monochrome：单色帧缓冲器每个像素的字节
•resolution：分辨率值，设备分辨率值
•scan：电视机类型设备扫描方式，progressive或interlace
•grid：只能指定两个值0或1
如何引入media
有两种常用的引入方式
1、link方法引入
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
2、@media引入
复制代码
@media screen and (min-width: 600px) and (max-width: 800px){
选择器{
属性：属性值；
}
}
浏览器兼容性
