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 }

 

　　　　　　　　　　　　

转载于:https://www.cnblogs.com/yan-ck/p/5842771.html