标签：
媒体查询可以让我们根据设备显示的特性为其设定CSS样式。可以在不改变页面内容的情况下，为特定的一些输出设变指定显示效果。
一、媒体查询语法
1、<link>标签：通过link标签的media属性为样式表指定设备类型，例如：
以下代码表示媒体类型是显示屏，媒体特性为显示屏纵向放置，此时才引入cssy样式
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="screen-style.css">
更进一步，还可以写一个媒体查询列表。查询列表中的任意一个查询为真，则加载文件。全部查询都不为真，则不加载。例子如下：表示只有显示屏纵向放置，且视口大于800px或者为投影仪时才引入css样式
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />
注：（1）媒体查询之间使用逗号分隔
（2）projection 之后，没有and，也没有任何特性/值的组合。没有后续表达式，意味着只要是projection 就满足条件。本例中，样式会应用于所有的投影仪。
2、在CSS样式表中使用媒体查询 ：例如，将下面的代码插入样式表，在屏幕宽度《=400px的设备上，h1元素文字就会变绿色 （最佳方式）
@media screen and (max-device-width : 400px) {h1 {color:green} }
3、使用CSS的@import指令：在当前样式表中按条件引入其他样式表； 例如下面代码会给视口最大宽度为360px的显示屏加载一个名为phone.css的样式表
@import url ("phone.css") screen and(max-width : 360px);
注： 使用@import方式会增加HTTP请求（会影响加载速度），应该谨慎使用。
二、媒体查询能检测哪些特性
width/height：视口宽高；
device-width/height：设备屏幕的宽高；
orientation：检查设备处于横向还是纵向；
device-aspect-ratio/aspect-ratio：基于设备/视口的宽高比；
color：每种颜色的位数。例如 min-color：16会检测设备是否拥有16位颜色；
color-index：设备的颜色索引表中的颜色数。值必须是非负整数。
monochrome：检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如 monochrome: 2。
resolution：用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。
scan：电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）
grid：用来检测输出设备是网格设备还是位图设备。
三、用媒体查询改造我们的设计
CSS层叠样式表，即样式表中后面的样式会覆盖前面相同的样式（更高优先级除外），所以可以利用媒体查询重写相应的部分
四、阻止移动浏览器自动调整页面大小
iOS 和Android 浏览器都基于WebKit（http://www.webkit.org/）核心。这两种浏览器以及很多其他浏览器（如Opera Mobile），都支持用 viewport meta 元素覆盖默认的画布缩放设置。在HTML的<head>标签中插入<meta>标签，在<meta>中可以设置具体宽度或缩放比例，例如，以下代码是将一个页面放大到设备实际尺寸两倍显示
<meta name="viewport" content="initial-scale=2.0,width=device width" />
一般，我们需要将缩放比设置为1.0，表示浏览器将按照视口的实际大小渲染页面，同时，将宽度设置为设备宽度表示浏览器都会按照设备实际大小来渲染页面，如下
<meta name="viewport" content="width=device-width,initial=scale=1.0" />
五、小结
媒体查询只能为我们提供自适应设计效果，不是完全的响应式。能让我们的设计在媒体查询设置的断点之间灵动显示的是流动布局。
标签：
原文地址：http://www.cnblogs.com/hawthornn/p/5462400.html
