CSS媒体查询器

      随着响应式应用模式的诞生，web网站即将迎来新一波的改革浪潮，你的知识也该刷新了，媒体查询器(Media),响应式的核心。简单介绍下用法：

准备工作：

1.设置meta标签

 为了兼容移动设备需要添加以下meta

 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" />

各个参数的含义：

            width=device-width：宽度等于当前设备的宽度。

            initial-scale=1.0：初始缩放比例为1.0。

            maximum-scale=1.0：允许用户的缩放到最大比例。

            user-scalable=0：是否允许用户手动缩放。

2.为了应付兼容性问题需要引入js：

<!--[if it IE9]>
 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

用法：

1.媒体查询规则：

@media all and (min-width: 800px) { 
 
   body{
     background:#000;
    }

 }

• @media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。
• (min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

2.简介写法：

@media (min-width:800px) { ... }

3.and用法：

@media (min-width:800px) and (max-width:1200px) { ... }

最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式。

4.or用法

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。

5.not关键字：

@media (not min-width:800px) { ... }

当最小宽度 不是  800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

6.orentation媒体查询

@media (orientation:portrait) { ... }

媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是  portrait  或  landscape 。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。当高度大于长度时，则认为屏幕是纵向模式，当宽度大于高度时，则认为屏幕是横向模式。

7.不带前缀的

@media (width:800px) and (height:400px) { ... }

media所有参数汇总：

width：浏览器宽度

height：浏览器高度

device-width：设备宽度

device-height：设备高度

orientation：检测设备是处于横向还是纵向。

aspect-ratio：检测浏览器的宽度和高度比例(aspect-ratio:16/9)。

device-aspect-ratio：检测设备的高宽比。

color：检测颜色位数。

color-index：检测设备颜色索引表中的颜色。

monochrome：检测单元缓冲区中每个像素的位置。

resolution：检测屏幕或打印机的分辨率。

grid：检测输出设备是网格的还是位图设备。

组织媒体查询：

     现在，我们已经了解了如何编写媒体查询，是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的 CSS 代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。

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

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

没有所谓正确或错误方法。您只需选择最适合的项目和团队的方法即可。