CSS3媒体查询器

CSS3媒体查询概览

随着响应式设计诞生，CSS3针对新的标准制定了更新的一些规范，从而使开发者更容易进行开发,使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。很多互联网公司都大胆尝试了新技术，在这里总结一下CSS3媒体查询的相关知识

Step1：设置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，因为我们不希望用户放大缩小页面）

Step2：加载兼容JS

IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Step3：设置IE渲染方式默认为Edge

<meta http-equiv="X-UA-Compatible" content="IE=edge">

@media写法

比如下列代码：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

这个意思就是：当页面小于960px的时候执行它下面的CSS
我们最常需要用到的媒体查询器的三个特性，大于，等于和小于，它们的写法如下：
大于

@media screen and (min-width:960px){
    body{
        background:red;
    }
}

等于

@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}

小于

@media (max-width: 960px){
    body{
        background: #000;
    }
}

我们甚至可以混合使用在一起，来提升判断的准确性，所有的参数如下：

• width:浏览器可视宽度。

• height:浏览器可视高度。

• device-width:设备屏幕的宽度。

• device-height:设备屏幕的高度。

• orientation:检测设备目前处于横向还是纵向状态。

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

• device-aspect-ratio:检测设备的宽度和高度的比例。

• color:检测颜色的位数。

• color-index:检查设备颜色索引表中的颜色，他的值不能是负数。

• monochrome:检测单色楨缓冲区域中的每个像素的位数。

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

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