移動web（四）響應式佈局、媒體查詢

移動web（四）響應式佈局、媒體查詢

1、響應式佈局的概念

一個網站可以兼容多個終端

2、響應式網站和傳統pc端之間的差異性

1）內容差異（響應式網站內容相對較少，而pc端相對較多）
2）佈局上的差異（響應式的佈局較爲簡單，而pc端佈局較爲複雜）
3）兼容性上的差異（響應式網站兼容會較差，而pc端沒有兼容問題）
注：這個兼容說的是瀏覽器的兼容

3、媒體查詢

1）作用：針對不同的屏幕大小鏈接不同的css樣式
2）方式：外鏈式媒體查詢、內嵌式迭代寫法

4、外鏈式媒體查詢

直接在html文件裏面用link標籤配合media屬性實現媒體查詢

<link rel="stylesheet" href="red.css" media="(min-width:980px)">
<link rel="stylesheet" href="green.css" media="(max-width:979px) and (min-width:540px)">
<link rel="stylesheet" href="blue.css" media="(max-width:539px)">

說明： px後面一定不能跟分號，區間與區間之間用and關鍵字鏈接，前後必須要有空格

弊端：
   1）每一個css都是獨立的，修改起來不方便 
   2）css太多了，請求就多了，不利於優化

5、內嵌式迭代媒體查詢

寫在css裏面，利用media關鍵字實現媒體查詢

 @media (判斷條件) {    
               css語句 
              }

小技巧：先寫最大範圍的css，然後用小範圍的css去覆蓋掉一些我們要修改的css

6、Bootstrap

中文官網：http://www.bootcss.com/

是一個UI框架，兩個很牛的人寫了一堆（下拉菜單，導航，按鈕.....並且還具備JS特效），我們只需要引入這個框架，並且複製它的結構代碼就能實現某些功能，並且同時具備柵格化（自動響應式）。

什麼時候運用？
（1）沒有設計圖的時候 只有原型圖
（2）項目比較趕
（3）製作一些簡約類型的網站的時候，說白了就是跟bootstrap提供的風格很類似的時候的網站可以去運用
（4）不適合一些定製類的網站，或者一些複雜的網站，例如電商這種的，更適合做一些企業站或者後臺管理系統界面