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

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

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

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

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

　　

1　　　<!--[if lt IE 9]>
2          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
3          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
4     <![endif]-->

　　使用方法：

　　　　1）在页面head标签中添加以下标签

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

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

 1 @media (min-width: 1200px) {
 2 
 3   .content {
 4     padding-left: 200px;
 5     padding-right: 200px;
 6   }
 7 }
 8 @media (min-width:960px) and (max-width:1200px){
 9 
10   .content {
11     padding-left: 80px;
12     padding-right: 80px;
13   }
14 }