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 }