響應工網頁設計(jì)與rem網頁設計(jì)的布局對比
目前的幾種布局
随着移動互聯網的發展和(hé)微信的突起，移動端的響應式布局越來(lái)越重要了。
目前網站(zhàn)布局有(yǒu)以下幾種：
1.定寬度布局
很(hěn)多(duō)pc的網站(zhàn)都是定寬度布局的，也就是設置了min-width，
這樣一來(lái)，如果小(xiǎo)于這個(gè)寬度就會(huì)出現滾動條，
如果大(dà)于這個(gè)寬度則內(nèi)容居中外加背景，
這種設計(jì)常見與pc端。
2.響應式布局
所謂響應式布局就是流式布局+媒體(tǐ)查詢，
流式布局用來(lái)解決不同寬度的布局問題，
外加媒體(tǐ)查詢，可(kě)以調整布局，例如大(dà)屏幕是布局1，小(xiǎo)屏幕是布局2，
這種布局通(tōng)吃(chī)pc和(hé)移動端，做(zuò)到精細處，兩者的效果都很(hěn)好，
缺點是媒體(tǐ)查詢是有(yǒu)限的，也就是可(kě)以枚舉出來(lái)的，
隻能适應主流的寬高(gāo)。
3.rem布局
近期出現rem布局，參考：http://isux.tencent.com/web-app-rem.html
原理(lǐ)是，先按定高(gāo)寬設計(jì)出來(lái)頁面，然後轉換為(wèi)rem單位，
配合js查詢屏幕大(dà)小(xiǎo)來(lái)改變html的font-size，
最終做(zuò)出所謂的完美自适應。
rem的缺點
rem一出好像所有(yǒu)移動端自适應不采用rem都很(hěn)low一樣，
來(lái)分析分析，
假設以100x100做(zuò)出網頁，
那(nà)麽采用rem+js完全可(kě)以自适應所有(yǒu)200x200，300x300，450x450等等高(gāo)寬，
問題來(lái)了，
如果用100x100設計(jì)好後，
來(lái)了100x200，100x300，100x400的手機，
那(nà)麽效果無非兩種：
1.網頁內(nèi)容隻局限與網頁頂部，例如100x400的手機，網頁內(nèi)容隻占用的100x100的部分，
2.有(yǒu)人(rén)說可(kě)以高(gāo)度也js+rem，那(nà)麽效果無非是拉伸或者縮放
不要擡杠
有(yǒu)人(rén)會(huì)說了，現實中不會(huì)有(yǒu)100x400的手機，
我想說的是這種rem+js隻不過是寬度自适應，
高(gāo)度沒有(yǒu)做(zuò)到自适應，一些(xiē)對高(gāo)度，或者元素見間(jiān)距要求比較高(gāo)的設計(jì)，
那(nà)這種布局沒有(yǒu)太大(dà)的意義。
如果隻是寬度自适應，那(nà)我更推薦的是響應式設計(jì)。
響應式 VS rem
1.響應式
随便找一個(gè)響應式的網站(zhàn)
改變浏覽器(qì)寬度，你(nǐ)會(huì)發現“布局”會(huì)随之變化，不是一成不變的，
例如導航欄在大(dà)屏幕下是橫排，在小(xiǎo)屏幕下是豎排，在超小(xiǎo)屏幕下隐藏為(wèi)菜單，
也就是說如果有(yǒu)足夠的耐心，在每一種屏幕下都應該有(yǒu)合理(lǐ)的布局，完美的效果。
優點：适應pc和(hé)移動端，如果足夠耐心，效果完美
缺點：要匹配足夠多(duō)的屏幕大(dà)小(xiǎo)，工作(zuò)量不小(xiǎo)，設計(jì)也需要多(duō)個(gè)版本
3.rem+js
改變浏覽器(qì)寬度，你(nǐ)會(huì)發現，頁面所有(yǒu)元素的高(gāo)寬都等比例縮放，
也就是大(dà)屏幕下導航是橫的，小(xiǎo)屏幕下還(hái)是橫的隻不過變小(xiǎo)了。。
優點：理(lǐ)想狀态是所有(yǒu)屏幕的高(gāo)寬比和(hé)最初的設計(jì)高(gāo)寬比一樣，或者相差不多(duō)，完美适應。
缺點：碰到重視(shì)高(gāo)度的設計(jì)，或者重視(shì)元素間(jiān)間(jiān)距的設計(jì)，那(nà)就玩不開(kāi)了。
總結
1.如果隻做(zuò)pc端
那(nà)麽定寬度是最好的選擇
2.如果做(zuò)移動端，且設計(jì)對高(gāo)度要求不高(gāo)
那(nà)麽rem+js是最好的選擇，一份css+一份js調節font-size搞定
3.如果pc，移動要兼容，而且要求很(hěn)高(gāo)
那(nà)麽響應式布局還(hái)是最好的選擇，前提是設計(jì)根據不同的高(gāo)寬做(zuò)不同的設計(jì)，
響應式根據媒體(tǐ)查詢做(zuò)不同的布局。
【ps】
還(hái)有(yǒu)一種rem+媒體(tǐ)查詢，和(hé)rem+js一對比感覺有(yǒu)點雞肋就沒有(yǒu)提及。
最完美的是
随着移動端的風行(xíng)，最完美的是：
響應式布局+多(duō)版本設計(jì)+足夠的耐心
廈門(mén)網站(zhàn)建設，網站(zhàn)優化，福建谷歌(gē)推廣，小(xiǎo)程序開(kāi)發，企業郵箱，微信推廣
