css響應式佈局RWD

響應式佈局結合了三大理念：

1）用於佈局的彈性網絡（百分比定義寬度）

2）用於圖片和視頻的彈性媒體

3）媒體查詢

在佈局中，須要注意的點有：

1）儘可能用min-width/max-width,max-height/min-height代替width,height

2)儘可能使用百分比，em爲單位代替精確值

3）採用媒體查詢

 

2、媒體查詢

IE8如下不支持媒體查詢，須要引入

<!-- if lte IE 8>
<script src="response.min.js"></script>
<![endif]-->

媒體查詢須要設置斷點，常見的斷點如480px,769px等。也能夠逐漸縮小瀏覽器的寬度，觀察佈局效果來引入。

媒體查詢引入的方式有兩種

1）經過link標籤引入

<link rel="stylesheet" href="css/small.css" media="(max-width:480x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:769x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:480px) and max-width(768px)">

2）將查詢包含在樣式表中

@media(max-width:480px){
}
@media(min-width:480px) and (max-width:768px){
}
@media(min-width:769px){
}