css3 media媒体查询器用法总结

准备工作：设置Meta标签

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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

这段代码的几个参数解释：

进入CSS3 Media写法

我们先来看下下面这段代码，估计很多人在响应式的网站CSS很经常看到类似下面的这段代码：

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

这个应该算是一个media的一个标准写法，上面这段CSS代码意思是：当页面小于960px的时候执行它下面的CSS.这个应该没有太大疑问。

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

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

我们来实现等于960px尺寸的代码：

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

然后就是当浏览器尺寸大于960px时候的代码了：

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

我们还可以混合使用上面的用法：

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

上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。

Media所有参数汇总

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。媒体查询器的全部功能肯定不止这三个功能，下面是我总结的它的一些参数用法解释：

实例