我(wo)們都知道，目前主(zhu)流的pc屏(ping)幕的分辨率都是(shi)(shi)1366*768、1440*900 、1280*1024等大屏(ping)的顯示器。所以網頁不(bu)能再(zai)按照(zhao)1024的標準來(lai)設計或者是(shi)(shi)前端重(zhong)構了。加上現在移(yi)動(dong)互聯網的發(fa)展勢頭，國內眾多電商網站還是(shi)(shi)門戶網站，移(yi)動(dong)端的流量要大于pc端的，移(yi)動(dong)互聯網平(ping)臺不(bu)容錯(cuo)過。

響(xiang)應式的核心優勢在(zai)于設計者可以為所(suo)有設備使用(yong)(yong)同一種(zhong)模板，只需要用(yong)(yong)CSS來定制內容在(zai)各種(zhong)大(da)小屏幕上的呈現方式。

一、4種響應式布局的設計方法

1，大圖平鋪自適應(ying)

這是(shi)一種給用戶感(gan)受最強烈的大背景全屏視(shi)覺，整個視(shi)覺主打一張(zhang)完整圖(tu)(tu)片，交(jiao)(jiao)互(hu)和(he)(he)文字(zi)(zi)信息(xi)較為簡(jian)單(dan)。圖(tu)(tu)片尺(chi)寸根(gen)據(ju)屏寬大小自適應，交(jiao)(jiao)互(hu)菜(cai)單(dan)和(he)(he)文字(zi)(zi)信息(xi)通常默認系統字(zi)(zi)體通過(guo)大小變換(huan)和(he)(he)位移進行屏寬自適應。

2、中心定位(wei)，兩側自適應(ying)

這(zhe)種(zhong)方法是將內容(rong)和視覺(jue)居中(zhong)，把尺寸控制在1000px以內。左右兩側放一些輔助信息，讓它們(men)根據屏(ping)幕寬度自適應。

3、單(dan)側定位，中心(xin)延(yan)伸展開(kai)

這(zhe)個方法就(jiu)是把主要的(de)內(nei)容(rong)放在左側(ce)，然后(hou)右邊(bian)放一(yi)些輔(fu)助信息。這(zhe)是根據(ju)用(yong)戶閱讀習(xi)慣決定(ding)的(de)，中間這(zhe)塊是自適應屏(ping)幕(mu)寬度內(nei)容(rong)。

4、小(xiao)切糕全屏響應式(shi)設計

其實(shi)小(xiao)切糕全屏響應式(shi)設計算(suan)是瀑(pu)布流里面(mian)的(de)一種。是根據屏幕寬度進行(xing)計算(suan)，以一個比較小(xiao)的(de)單(dan)元格微(wei)基礎(chu)，然后以2倍(bei)(bei)，3倍(bei)(bei)，4倍(bei)(bei)等方式(shi)進行(xing)拓展(zhan)，并計算(suan)出最適(shi)合的(de)完整組合。通常用在圖(tu)片信息展(zhan)示頁(ye)面(mian)。

二、響應式布局的組成和常用插件介紹

1、Media Query

Media Query的(de)(de)主要作用(yong)是(shi)根據不(bu)同的(de)(de)分(fen)辨(bian)率(lv)去調整(zheng)一(yi)些不(bu)同的(de)(de)樣式。由于目前主流的(de)(de)移動設備都基于ios和(he)Android，這(zhe)兩者的(de)(de)自帶(dai)瀏(liu)覽器都是(shi)webkit內核，因此我們(men)可以(yi)使用(yong)viewport屬性和(he)Media Query技術實現響應(ying)式網頁。通過這(zhe)一(yi)方法(fa)，我們(men)能實現讓基準字號font-size在不(bu)同分(fen)辨(bian)率(lv)下顯示不(bu)一(yi)樣的(de)(de)內容。

2、Fluid grid

Fluid grid也稱流體布局(ju)，就(jiu)是在PC端實現(xian)的(de)(de)(de)基礎上將(jiang)一些元素的(de)(de)(de)狂(kuang)傲由固定調整(zheng)為彈性(xing)制的(de)(de)(de)百(bai)分比或是字(zi)體比例等。使(shi)用Fluid grid的(de)(de)(de)網站能夠根(gen)據屏幕(mu)寬度自動(dong)調整(zheng)頁(ye)面中每列(lie)的(de)(de)(de)寬度，從而保證頁(ye)面始(shi)終處于完整(zheng)展(zhan)現(xian)的(de)(de)(de)狀態，并(bing)且實現(xian)原(yuan)有的(de)(de)(de)基本功能。

3、Flex box

Flex box是(shi)CSS3新(xin)添加的(de)(de)一種模型屬性，它的(de)(de)出(chu)現(xian)(xian)有(you)力(li)的(de)(de)打破了我(wo)們常常使用的(de)(de)浮動布(bu)(bu)局、實(shi)現(xian)(xian)垂直等高、水平均分(fen)、按(an)比例劃(hua)分(fen)，可(ke)以實(shi)現(xian)(xian)許多我(wo)們之前做不到的(de)(de)自(zi)適應(ying)(ying)布(bu)(bu)局。如果(guo)你(ni)希(xi)望網站能以webapp的(de)(de)外觀(guan)呈現(xian)(xian)在手機用戶面前，那(nei)么，Flex box就是(shi)個(ge)不錯的(de)(de)方式。Flex box和(he)APP的(de)(de)結構很類(lei)似，頭部(bu)(bu)底部(bu)(bu)全(quan)部(bu)(bu)固定，而中(zhong)間部(bu)(bu)分(fen)的(de)(de)高度實(shi)現(xian)(xian)自(zi)適應(ying)(ying)。

三、響應式網站建站工具

市場上有很多響應式建站工具，自由度較高的有，采用組合布局的形式（流布局+自由布局），通過拖拽添加模塊，能做出豐富多變的網站樣式，滿足不同企業和個人的建站需求，而且不需要編程基礎，一次實際，跨屏適用。適合不懂前端有想嘗試多元網頁布局的站長。

了解建站寶盒V9：