Css媒体查询

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

媒体查询准备工作

设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
参数解释：

• width = device-width： 宽度等于当前设备的宽度
• initial-scale： 初始的缩放比例（默认设置为1.0）
• minimum-scale： 允许用户缩放到的最小比例（默认设置为1.0）
• maximum-scale： 允许用户缩放到的最大比例（默认设置为1.0）
• user-scalable： 用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

  语法

媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性，这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真，并且媒体查询中的所有表达式为真。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为真时，相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假， <link> 标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。

在不使用 not 或 only 操作符的情况下，媒体类型是可选的，默认为 all 。

逻辑操作符

操作符 not，and 和 only可以用来构建复杂的媒体查询。

• and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
• or 当使用时，如果任何一个媒体查询返回真，样式就是有效的。or分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着 or 媒体查询列表能够作用于不同的媒体属性、类型和状态。
• not 操作符用来对一条媒体查询的结果进行取反。
• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

and

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型，可能像这样子：
@media (min-width: 700px) { ... }
如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：
(min-width: 700px) and (orientation: landscape) { ... }
现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果，你仅想再电视媒体上应用，你可以使用 and 操作符合并媒体属性：
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

or 逗号分隔列表
媒体查询中使用逗号分隔效果等同于or 逻辑操作符。
例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。
在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。

not 在下面的查询中最后被计算：
@media not all and (monochrome) { ... }
等价于：@media not (all and (monochrome)) { ... }
而不是：@media (not all) and (monochrome) { ... }

only

only 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：
<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的几个特性，其他参数用法解释：

• width: 浏览器可视宽度。
• height: 浏览器可视高度。
• device-width: 设备屏幕的宽度。
• device-height: 设备屏幕的高度。
• orientation: 检测设备目前处于横向还是纵向状态。
• aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
• device-aspect-ratio: 检测设备的宽度和高度的比例。
• color: 检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
• color-index: 检查设备颜色索引表中的颜色，他的值不能是负数。
• monochrome: 检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
• resolution: 检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
• grid: 检测输出的设备是网格的还是位图设备。

常见媒体查询

//实际应用一 判断设备横竖屏：
/* 这是匹配横屏的状态，横屏时的css代码 */
@media all and (orientation :landscape){}
/* 这是匹配竖屏的状态，竖屏时的css代码 */
@media all and (orientation :portrait){}

//实际应用二 判断设备类型：
@media X and (min-width:200px){}
X为设备类型》比如print/screen/TV等等

//实际应用三 判断设备宽高：
/* 宽度大于600px小于960之间时，隐藏footer结构 */
@media all and (min-height:640px) and (max-height:960px){
    footer{display:none;}
}

组织媒体查询

第一个方法是为不同屏幕大小指定完全不同的样式表。
规则可以保存在独立样式表中，这使得显示逻辑能够清楚地划分出来，更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。
缺点是如果要为每个媒体查询创建单独的样式表，则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时，需要创建多个位置进行查看，这使得网站 CSS 的维护变得更加困难。

第二个方法是在现有样式表中使用媒体查询，该样式表就在定义其余元素样式表的位置的旁边。
这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时，这种做法可以创建更多源代码合并工作，但这是所有基于团队的软件开发都可以管理且常见的一部分。

没有所谓正确或错误方法。只需选择最适合的方法即可。

浏览器兼容

加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载JS文件，来保证我们的代码实现兼容效果。Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库，使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。最终结果是，能够在原本不支持的浏览器上运行媒体查询：

<!--[if lt IE 9]>
  <script src="libs/respond.js/"></script>
<![endif]-->

设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

如果有的用户电脑里面装了这个chrome的插件，chrome=1就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算。

参考

1. 使用 CSS 媒体查询创建响应式网站
2. CSS媒体查询
3. 520UED
4. css3媒体查询实现网站响应式布局