css3新特性@media(媒体查询)

现在web页面运行的设备的屏幕从pc端到pad，从pad到手机，各种各样，这样就用到了现在经常用到的响应式页面，为实现响应式页面开发，就用到一个非常有用的css3属性media（媒体查询）。

　　介绍：媒体查询属性可以帮助前端开发人员根据屏幕的大小改变dom元素的css属性，从而做到响应式开发。

　　浏览器支持情况：，可以看到大部分浏览器都支持媒体查询的属性，但是很遗憾ie 9一下不支持css3的媒体查询属性。

　　ie6-ie8的支持方法：我们可以在页面中添加如下两个js脚本就可以是ie6-ie8支持媒体查询。代码如下

　　

1　　　<!--[if lt IE 9]>
         <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）在页面head标签中添加如下标签

<meta name="viewport" content="width=device-width,initial-scale=1.0">

　　　　2）在css文件中使用media属性，代码如下

@media (min-width: 1200px) {

  .content {
    padding-left: 200px;
    padding-right: 200px;
  }
}
@media (min-width:960px) and (max-width:1200px){

  .content {
    padding-left: 80px;
    padding-right: 80px;
  }
}