CSS3@media查询的使用

Media Queries能元素在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。@media查询是CSS3新增的，比之前的media查询使时方便多了，使响应式网页设计更加方便。优点：不用创建另外的CSS文件、语法简单使用方便。缺点：浏览器支持较晚，详细支持情况请看下方表格。

注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如：(max-width: 480px)。

主要有十种媒体类型和13种媒体特性，将其组合就类似于不同的CSS集合，最常用的是screen。

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。 应用于盲文触摸式反馈设备
embossed	已废弃。 用于打印的盲人印刷设备