CSS3媒体查询

1 css3媒体查询

css3媒体查询是响应式方案核心。

2 媒体类型

类型	说明
all	所有媒体（默认值）
screen	彩色屏幕
print	打印预览
projection	手持设备
tv	电视
braille	盲文触觉设备
embossed	盲文打印机
speech	“听觉”类似的媒体设备
tty	不适用像素的设备

3 媒体属性

• width （可加max min前缀）
• height （可加max min前缀）
• device-width （可加max min前缀）
• device-pixel-ratio（可加max min前缀，需要加webkit前缀）
• orientation
  • portrait竖屏
  • landscape横屏

4 操作符，关键字 (only,and,(，or),not)

4.1 only：

防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式：

@media only screen and (min-width:800px ){
					规则；
					规则
}
@media  screen and (min-width:800px ){
					规则；
					规则
}

在老款的浏览器下：

@media only    --->    因为没有only这种设备 规则被忽略
@media screen --->   因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

建议在每次抒写media query的时候带上only

4.2 and:

连接媒体属性 、连接媒体类型，对于所有的连接选项都要匹配成功才能应用规则。

4.3 or(,) : 和and相似

对于所有的连接选项只要匹配成功一个就能应用规则

4.4 not:取反