響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)布局

      隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展和微信的突起，移動(dòng)端的響應(yīng)式布局越來(lái)越重要了。

目前網(wǎng)站布局有以下幾種：

1.定寬度布局

      很多pc的網(wǎng)站都是定寬度布局的，也就是設(shè)置了min-width，這樣一來(lái)，如果小于這個(gè)寬度就會(huì)出現(xiàn)滾動(dòng)條，如果大于這個(gè)寬度則內(nèi)容居中外加背景，這種設(shè)計(jì)常見(jiàn)與pc端。

2.響應(yīng)式布局

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

3.rem布局

      近期出現(xiàn)rem布局，原理是，先按定高寬設(shè)計(jì)出來(lái)頁(yè)面，然后轉(zhuǎn)換為rem單位，配合js查詢屏幕大小來(lái)改變html的font-size，最終做出所謂的完美自適應(yīng)。

rem的缺點(diǎn)

      rem一出好像所有移動(dòng)端自適應(yīng)不采用rem都很low一樣，來(lái)分析分析，假設(shè)以100x100做出網(wǎng)頁(yè)，那么采用rem+js完全可以自適應(yīng)所有200x200，300x300，450x450等等高寬。

問(wèn)題來(lái)了：

      如果用100x100設(shè)計(jì)好后，來(lái)了100x200，100x300，100x400的手機(jī)，那么效果無(wú)非兩種：

      1.網(wǎng)頁(yè)內(nèi)容只局限與網(wǎng)頁(yè)頂部，例如100x400的手機(jī)，網(wǎng)頁(yè)內(nèi)容只占用的100x100的部分；

      2.有人說(shuō)可以高度也js+rem，那么效果無(wú)非是拉伸或者縮放。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-21196.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注網(wǎng)頁(yè)制作頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050