網頁流行的佈局方式-筆記

目前網頁流行的佈局方式有一下三種：

1.定寬度佈局常規的pc的網站都是定寬度佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見與pc端。
2.響應式佈局所謂響應式佈局就是流式佈局+媒體查詢，流式佈局用來解決不一樣寬度的佈局問題，外加媒體查詢，能夠調整佈局，例如大屏幕是佈局1，小屏幕是佈局2，這種佈局通吃pc和移動端，作到精細處，二者的效果都很好，缺點是媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。
3.rem佈局近期出現rem佈局。原理是，先按定高寬設計出來頁面，而後轉換爲rem單位，配合js查詢屏幕大小來改變html的font-size，最終作出所謂的完美自適應。 rem一出來，好像全部移動端自適應不採用rem就有點落後，可是咱們能夠分析：假設以100x100作出網頁，那麼採用rem+js徹底能夠自適應全部200*200，300*300，450*450等等高寬，結果問題來了，若是用100*100設計好後，來了100*200，100*300，100*400的手機，那麼效果無非兩種：1.網頁內容只侷限與網頁頂部，例如100*400的手機，網頁內容只佔用的100x100的部分。2.有人說能夠高度也js+rem，那麼效果無非是拉伸或者縮放。沒錯，現實中不會有100x400的手機，我想說的是這種rem+js只不過是寬度自適應，高度沒有作到自適應，一些對高度，或者元素間距要求比較高的設計，則這種佈局沒有太大的意義。若是隻是寬度自適應，那我更推薦的是響應式設計。
來看看他們兩之間的對比：響應式的案例：改變瀏覽器寬度，「佈局」會隨之變化，不是一成不變的，例如導航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏爲菜單，也就是說若是有足夠的耐心，在每一種屏幕下都應該有合理的佈局，完美的效果。優勢：適應pc和移動端，若是足夠耐心，效果完美缺點：要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。

rem佈局：改變瀏覽器寬度，頁面全部元素的高寬都等比例縮放，也就是大屏幕下導航是橫的，小屏幕下仍是橫的只不過變小了。。優勢：理想狀態是全部屏幕的高寬比和最初的設計高寬比同樣，或者相差很少，完美適應。缺點：碰到重視高度的設計，或者重視元素間間距的設計，那就玩不開了。

因此得出了下面的結論：1.若是隻作pc端，那麼定寬度是最好的選擇2.若是作移動端，且設計對高度和元素間距要求不高，那麼rem+js是最好的選擇，一份css+一份js調節font-size搞定3.若是pc，移動要兼容，並且要求很高那麼響應式佈局仍是最好的選擇，前提是設計根據不一樣的高寬作不一樣的設計，響應式根據媒體查詢作不一樣的佈局。四、作設計，耐心也是很重要的，擁有響應式佈局+多版本設計+足夠的耐心，才能作出用戶體驗不錯的網站