響應式網頁設計布局

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

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

1.定寬度布局

      很多pc的網站都是定寬度布局的，也就是設置了min-width，這樣一來，如果小于這個寬度就會出現滾動條，如果大于這個寬度則內容居中外加背景，這種設計常見與pc端。

2.響應式布局

      所謂響應式布局就是流式布局+媒體查詢，流式布局用來解決不同寬度的布局問題，外加媒體查詢，可以調整布局，例如大屏幕是布局1，小屏幕是布局2，這種布局通吃pc和移動端，做到精細處，兩者的效果都很好，缺點是媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。

3.rem布局

      近期出現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，那么效果無非是拉伸或者縮放。

      注：尊重原創文章,轉載請注明出處和鏈接 http://www.hebeijilong.cn/news-id-21196.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注網頁制作頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050