水平有限，不對之處還請指出。

【目前幾種佈局】

隨著移動網際網路的發展和微信的突起，移動端的響應式佈局越來越重要了。

目前網站佈局有以下幾種：

1.定寬度佈局

很多pc的網站都是定寬度佈局的，也就是設定了min-width，

這樣一來，如果小於這個寬度就會出現滾動條，

如果大於這個寬度則內容居中外加背景，

這種設計常見與pc端。

2.響應式佈局

所謂響應式佈局就是流式佈局+媒體查詢，

流式佈局用來解決不同寬度的佈局問題，

外加媒體查詢，可以調整佈局，例如大螢幕是佈局1，小螢幕是佈局2，

這種佈局通吃pc和移動端，做到精細處，兩者的效果都很好，

缺點是媒體查詢是有限的，也就是可以枚舉出來的，

只能適應主流的寬高。

3.rem佈局

原理是，先按定高寬設計出來頁面，然後轉換為rem單位，

配合js查詢螢幕大小來改變html的font-size，

最終做出所謂的完美自適應。

【rem缺點】

rem一出好像所有移動端自適應不採用rem都很low一樣，

來分析分析，

假設以100x100做出網頁，

那麼採用rem+js完全可以自適應所有200x200，300x300，450x450等等高寬，

問題來了，

如果用100x100設計好後，

來了100x200，100x300，100x400的手機，

那麼效果無非兩種：

1.網頁內容只侷限與網頁頂部，例如100x400的手機，網頁內容只佔用的100x100的部分，

2.有人說可以高度也js+rem，那麼效果無非是拉伸或者縮放

【不要擡槓】

有人會說了，現實中不會有100x400的手機，

我想說的是這種rem+js只不過是寬度自適應，

高度沒有做到自適應，一些對高度，或者元素見間距要求比較高的設計，

那這種佈局沒有太大的意義。

如果只是寬度自適應，那我更推薦的是響應式設計。

【響應式 vs rem】

1.響應式

改變瀏覽器寬度，你會發現“佈局”會隨之變化，不是一成不變的，

例如導航欄在大螢幕下是橫排，在小螢幕下是豎排，在超小螢幕下隱藏為選單，

也就是說如果有足夠的耐心，在每一種螢幕下都應該有合理的佈局，完美的效果。

優點：適應pc和移動端，如果足夠耐心，效果完美

缺點：要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本

附圖：

2.rem+js

改變瀏覽器寬度，你會發現，頁面所有元素的高寬都等比例縮放，

也就是大螢幕下導航是橫的，小螢幕下還是橫的只不過變小了。。

優點：理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應。

缺點：碰到重視高度的設計，或者重視元素間間距的設計，那就玩不開了。

附圖：

【總結】

1.如果只做pc端

那麼定寬度是最好的選擇

2.如果做移動端，且設計對高度要求不高

那麼rem+js是最好的選擇，一份css+一份js調節font-size搞定

3.如果pc，移動要相容，而且要求很高

那麼響應式佈局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，

響應式根據媒體查詢做不同的佈局。

【ps】

還有一種rem+媒體查詢，和rem+js一對比感覺有點雞肋就沒有提及。

【最完美的是】

隨著移動端的風行，最完美的是：

響應式佈局+多版本設計+足夠的耐心