全面解析CSS Media媒体查询使用操作（推荐）

前面的话

　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容

媒介类型

　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在

　　media属性用于为不同的媒介类型规定不同的样式

screen         计算机屏幕（默认值）   
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
print          打印预览模式 / 打印页
braille        盲人用点字法反馈设备
aural          语音合成器
all            适合所有设备

　　真正广泛使用且所有浏览器都兼容的媒介类型是’screen’和’all’

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}
</style>
<div class="box"></div> 

  媒体属性

　　媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

　　[注意]媒体属性必须用括号()包起来，否则无效

　　下表中列出了所有的媒体属性

     width | min-width | max-width
     height | min-height | max-height
     device-width | min-device-width | max-device-width
     device-height | min-device-height | max-device-height
     aspect-ratio | min-aspect-ratio | max-aspect-ratio
     device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
     color | min-color | max-color
     color-index | min-color-index | max-color-index
     monochrome | min-monochrome | max-monochrome
     resolution | min-resolution | max-resolution
     scan | grid

【1】颜色（color）