media媒体查询器用法

随着响应式设计模型的诞生，Web网站又要发生翻天腹地的改革浪潮，再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。

1.设置兼容移动设备的展示效果，首先把Meta标签写上，

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

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

initial-scale：初始的缩放比例（默认设置为1.0）  

minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    

maximum-scale：允许用户缩放到的最大比例（默认设置为1.0） 

user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 

2.加载js

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

3.关于IE浏览器兼容问题

因为现在有许多用户使用IE9的浏览器，但是浏览器的文档模式却是IE8:所以需把

content="IE=Edge

content="IE=Edge的意思  IE的文档模式永远都是最新的。

的意思  IE的文档模式永远都是最新的。

4.CSS3 Media写法

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

这段代码的意思是：页面小于960px的时候这行他下边的css。

5.css2用法

其实不只是有CSS3支持，早在css2开始就已经支持Media，就是在HTML页面的head标签中插入如下的代码：

以上就是我们最常需要用到的媒体查询器的三个特性，大于，等于，小于的写法。