李慕+趙彤洲+周萍

摘要： Bootstrap框架采用CSS柵格系統(tǒng)對不同顯示設(shè)備具有自動適配能力。為使不同尺度、不同分辨率以及不同放置方向的顯示設(shè)備均能正常顯示網(wǎng)頁內(nèi)容，需要設(shè)置合理的視口寬度斷點(diǎn)。通過對響應(yīng)式網(wǎng)頁設(shè)計(jì)中斷點(diǎn)閾值設(shè)置方案、斷點(diǎn)圖繪制方法進(jìn)行研究，提出了針對不同設(shè)備的斷點(diǎn)設(shè)定方案。實(shí)驗(yàn)表明，該方案能適應(yīng)主流顯示設(shè)備，在保持頁面內(nèi)容不變的同時，實(shí)現(xiàn)多類型顯示設(shè)備的一致性顯示，進(jìn)而大大縮減研發(fā)人員工作量。關(guān)鍵詞：響應(yīng)式網(wǎng)頁設(shè)計(jì)；Bootstrap；媒體查詢；移動互聯(lián)網(wǎng)DOI：10.11907/rjdk.162795中圖分類號：TP306文獻(xiàn)標(biāo)識碼：A 文章編號：16727800（2017）004002503

0引言 隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，移動終端設(shè)備紛紛面市，這對網(wǎng)絡(luò)應(yīng)用端的設(shè)計(jì)提出了新的要求。若要針對每一種終端各做一套頁面，會增加運(yùn)營成本和后期維護(hù)成本。因此，一種能滿足各種設(shè)備分辨率，在不同屏幕、不同系統(tǒng)平臺環(huán)境下保持網(wǎng)頁布局的一致性，滿足用戶一致體驗(yàn)的網(wǎng)頁已成為網(wǎng)頁設(shè)計(jì)的發(fā)展方向。響應(yīng)式網(wǎng)頁設(shè)計(jì)能讓同一個頁面根據(jù)不同顯示設(shè)備的屏幕尺寸自動調(diào)整網(wǎng)頁布局，保證頁面呈現(xiàn)最佳顯示效果[1]。其中，網(wǎng)頁布局調(diào)整的閾值就是斷點(diǎn)，設(shè)置合適的斷點(diǎn)是開發(fā)高性能響應(yīng)式網(wǎng)頁的重要節(jié)點(diǎn)。Bootstrap框架是目前較流行的響應(yīng)式設(shè)計(jì)框架之一，本系統(tǒng)對Bootstrap框架下的斷點(diǎn)設(shè)置進(jìn)行了研究，提出了能適應(yīng)絕大多數(shù)設(shè)備的斷點(diǎn)設(shè)置方案。1響應(yīng)式網(wǎng)頁設(shè)計(jì)1.1響應(yīng)式網(wǎng)頁設(shè)計(jì)基本概念 “響應(yīng)式網(wǎng)頁設(shè)計(jì)”是指該設(shè)計(jì)模式能根據(jù)顯示器尺寸、分辨率以及放置方向，自動調(diào)整頁面，使之能以最佳顯示模式呈現(xiàn)給用戶[2]。頁面設(shè)計(jì)應(yīng)該遵循模塊化設(shè)計(jì)原則，使其能“可擴(kuò)展、無浸染”，能適配任何型號的移動終端顯示器，無需另外開發(fā)“子網(wǎng)站”。簡言之，就是一個網(wǎng)站能夠兼容多個終端，而不是為每個終端做一個特定的版本。無論用戶正在使用筆記本電腦、iPad 還是智能手機(jī)，所要瀏覽的頁面能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備，即頁面能自動響應(yīng)用戶的設(shè)備環(huán)境?！糐P〗1.2Bootstrap框架 Bootstrap框架是響應(yīng)式網(wǎng)頁設(shè)計(jì)中運(yùn)用比較廣泛的框架[3]。Bootstrap提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（Viewport）尺寸的增加，可以自動適配不同尺寸的顯示器[4]。表1 顯示了Bootstrap 的柵格系統(tǒng)在多種屏幕設(shè)備上的工作原理。柵格系統(tǒng)行為：柵格的排列方式；.container最大寬度：表示整個頁面的寬度；類前綴：代表不同尺寸屏幕設(shè)備，如.col-xs-就表示超小屏幕；列數(shù)：隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列；最大列（cloumn）寬：一般情況下不會改變列數(shù)，最大列寬取決于整個頁面的寬度；槽（gutter）寬：表示列與列之間的間距；（臨界）斷點(diǎn)：柵格系統(tǒng)行為發(fā)生變化的臨界點(diǎn)。 Bootstrap 柵格系統(tǒng)的工作原理如下[5]： （1）數(shù)據(jù)行（.row）必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內(nèi)距（padding）。如：

（2）在行（.row）中可以添加列（.column），但列數(shù)之和不能超過平分的總列數(shù)，比如12。如： （3）具體內(nèi)容應(yīng)當(dāng)放置在列容器（column）之內(nèi)，而且只有列（column）才可以作為行容器（.row）的直接子元素。 （4）通過設(shè)置內(nèi)距（padding）從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距（margin）來抵消內(nèi)距（padding）的影響。 通過表1可以看出，Bootstrap中根據(jù)視口寬度設(shè)置了3個默認(rèn)斷點(diǎn)，分別是768px、992px、1200px。這3個斷點(diǎn)包含4種情況：①超小屏幕（視口寬度小于768px），如手機(jī)；②小屏幕（視口寬度大于等于768px 且小于992px），如平板；③中等屏幕（視口寬度大于等于992px且小于1 200px），如桌面顯示器；④大屏幕（視口寬度大于等于1 200px），如大桌面顯示器。對于一個全尺寸顯示方案而言，斷點(diǎn)閾值的選擇成為響應(yīng)式網(wǎng)頁設(shè)計(jì)的關(guān)鍵因素。2斷點(diǎn)在響應(yīng)式網(wǎng)頁中的應(yīng)用 斷點(diǎn)就是臨界點(diǎn)[6]。在臨界點(diǎn)上網(wǎng)頁的布局、功能、內(nèi)容都可以根據(jù)當(dāng)前顯示終端的尺寸、分辨率進(jìn)行自適應(yīng)匹配。斷點(diǎn)的設(shè)置與站點(diǎn)的內(nèi)容、用戶設(shè)備的分辨率、用戶規(guī)模和成本計(jì)算都息息相關(guān)。2.1斷點(diǎn)閾值設(shè)置 在柵格系統(tǒng)中可以在Less文件中使用媒體查詢（media query）來設(shè)置斷點(diǎn)的閾值[7]。下面以Bootstrap中默認(rèn)斷點(diǎn)閾值設(shè)置為例。 （1）超小屏幕（手機(jī)，小于 768px）。沒有任何媒體查詢相關(guān)代碼，在Bootstrap中是默認(rèn)的，因?yàn)锽ootstrap是移動設(shè)備優(yōu)先。 （2）小屏幕（平板，大于等于 768px）。 @media （min-width：768px） { ...} （3）中等屏幕（桌面顯示器，大于等于 992px）。 @media （min-width：992px） { ...} （4）大屏幕（大桌面顯示器，大于等于 1200px）。 @media （min-width：1200px） { ...} 其中，min-width是定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾?。Bootstrap采用的是移動優(yōu)先，其特點(diǎn)是先考慮設(shè)計(jì)移動的樣式，再設(shè)置斷點(diǎn)，一步步向大尺寸增加樣式，因而采用min-width。除了Bootstrap中默認(rèn)的斷點(diǎn)外，也可以使用媒體查詢設(shè)置其它需要的斷點(diǎn)。媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達(dá)式組成，媒體查詢中可用于檢測的媒體特性有width、height和color等。在響應(yīng)式的頁面使用媒體查詢可以針對不同的屏幕尺寸設(shè)置不同的樣式，在重置瀏覽器大小的過程中，頁面會根據(jù)瀏覽器的寬度和高度重新渲染頁面。2.2網(wǎng)頁設(shè)計(jì)中斷點(diǎn)選取 頁面設(shè)計(jì)要綜合考慮各類設(shè)備，通常包含面向PC端、面向PC+平板電腦端、面向平板電腦+手機(jī)端、僅有手機(jī)端以及全兼容這5種情況。 一般內(nèi)容較簡單的站點(diǎn)如小公司網(wǎng)站及個人博客可以采用全兼容響應(yīng)，因?yàn)橹谱鞒杀鞠鄬^低，如imweb就是同一內(nèi)容兼容所有平臺；而一些內(nèi)容非常多、站點(diǎn)比較復(fù)雜的則可以采用兩種方案：pc+平板設(shè)計(jì)方案、手機(jī)設(shè)計(jì)方案，如攜程網(wǎng)就是這種模式。全兼容模式一般以內(nèi)容體為流式，可以采用Bootstrap設(shè)置關(guān)鍵斷點(diǎn)，再額外增加一些局部斷點(diǎn)美化頁面以提升體驗(yàn)；而PC端+平板電腦可以通過設(shè)置窄屏、寬屏、超大屏3個斷點(diǎn)來實(shí)現(xiàn)；最后對于只在手機(jī)端的顯示則可以不設(shè)置斷點(diǎn)，但得保證在各種分辨率下都訪問正常，這就要求對整行容器或者里面的部分內(nèi)容進(jìn)行流式布局，在一些特定的情況下也需要額外補(bǔ)充斷點(diǎn)。當(dāng)前市場上，顯示設(shè)備呈多元化發(fā)展趨勢。常見的辦法是獲取主流顯示設(shè)備的分辨率，然后劃分出各類顯示設(shè)備的分辨率斷點(diǎn)，由此進(jìn)行網(wǎng)頁布局設(shè)計(jì)就能滿足設(shè)備兼容的需要。2.3斷點(diǎn)圖繪制 斷點(diǎn)圖是將漸進(jìn)增強(qiáng)模式可視化的一種圖形化方法[8]。所謂的漸進(jìn)增強(qiáng)模式就是針對低版本瀏覽器進(jìn)行頁面構(gòu)建，保證最基本的功能，再針對高級瀏覽器進(jìn)行效果、交互等改進(jìn)并追加功能達(dá)到更好的用戶體驗(yàn)。這種方法能實(shí)現(xiàn)小屏幕布局到大屏幕布局并流暢展示出來，繪制斷點(diǎn)圖能夠更好地幫助實(shí)現(xiàn)網(wǎng)頁布局。繪制斷點(diǎn)圖首先要確定斷點(diǎn)，然后在對應(yīng)的斷點(diǎn)下方繪制網(wǎng)頁布局縮略圖，表示當(dāng)視口大小達(dá)到該值時，將顯示該布局的效果。斷點(diǎn)圖又分3種類型，分別是帶有布局縮略圖的斷點(diǎn)圖、帶有次斷點(diǎn)的斷點(diǎn)圖和展示CSS 文件作用范圍的斷點(diǎn)圖。〖JP〗 （1）帶有布局縮略圖的斷點(diǎn)圖。帶有布局縮略圖的斷點(diǎn)圖，即簡單斷點(diǎn)圖，如圖1所示。 本例中斷點(diǎn)為768px 、992px和12 00px，含義是：視口小于768px，使用單列布局；視口大于等于768px 且小于992px 使用雙列布局；視口大于等于992px小于1 200px使用三列布局；視口大于1 200px使用五列布局。 （2）帶有次斷點(diǎn)的斷點(diǎn)圖。帶有次斷點(diǎn)的斷點(diǎn)圖是在簡單斷點(diǎn)圖的基礎(chǔ)上，把某一區(qū)域變化也表現(xiàn)出來。次斷點(diǎn)就是這個變化的區(qū)域，如圖2所示。 在本例中，次斷點(diǎn)用綠色區(qū)分其它區(qū)域，當(dāng)視口大于等于768px 且小于850px 時，該區(qū)塊的布局效果與第一區(qū)塊呈兩列布局；其它情況下，該區(qū)塊和第一區(qū)塊呈兩行布局。 （3）展示CSS 文件作用范圍的斷點(diǎn)圖。在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，網(wǎng)頁根據(jù)視口尺寸呈現(xiàn)不同布局，為每一種布局創(chuàng)建單獨(dú)CSS 文件是有效管理樣式代碼的方法?？梢园迅鱾€樣式文件的作用范圍添加到斷點(diǎn)圖中，讓設(shè)計(jì)人員更直觀地了解各CSS 文件的作用范圍，方便接下來編碼工作的規(guī)范開展，如圖3 所示。 在本例中，base.css 文件應(yīng)用所有屏幕尺寸；minimum.css應(yīng)用于小于768px的超小屏幕；small.css應(yīng)用于大于等于768px 且小于992px 的小屏幕尺寸；medium.css 應(yīng)用于大于等于992px 且小于1 200px 的中等屏幕尺寸；large.css 應(yīng)用于大于等于1 200px 的大屏幕尺寸。2.4斷點(diǎn)在響應(yīng)式網(wǎng)頁中的應(yīng)用效果 Bootstrap框架通過設(shè)備頁面容器查詢進(jìn)行自適應(yīng)頁面匹配，它根據(jù)設(shè)備顯示器的特性（如視口寬度、屏幕比例、設(shè)備方向：橫向或縱向）為其設(shè)定CSS樣式。當(dāng)頁面寬度調(diào)整時頁面會根據(jù)檢查到的斷點(diǎn)及其相應(yīng)作用范圍的CSS文件而作出相應(yīng)改變。下面以一個用Bootstrap框架寫的響應(yīng)式網(wǎng)頁為例進(jìn)行說明，該頁面中設(shè)置了3個斷點(diǎn)，其閾值分別為768px、992px、1 200px。 頁面視口大于1 200px時，頁面布局如圖4所示。在該頁面中主要以紅色方框標(biāo)注的5個區(qū)域變化來說明斷點(diǎn)在響應(yīng)式網(wǎng)頁中的重要應(yīng)用。如圖5所示，1區(qū)域位于頁面最左邊，2、3、4、5區(qū)域呈現(xiàn)一行四列布局。 當(dāng)頁面視口寬度逐漸減小至1 200px、992px、768px時，頁面布局都會根據(jù)CSS文件而作出相應(yīng)改變。以視口寬度為768px為例，當(dāng)頁面適口寬度逐漸縮小至768px時，圖4頁面布局發(fā)生了變化，圖4對應(yīng)的1區(qū)域隱藏，2、3、4、5變?yōu)樗男幸涣胁季郑湫Ч鐖D5所示。3結(jié)語 斷點(diǎn)設(shè)置在響應(yīng)式網(wǎng)頁設(shè)計(jì)中有著重要作用，根據(jù)移動設(shè)備和用戶需求合理地設(shè)置斷點(diǎn)極其重要。在進(jìn)行響應(yīng)式網(wǎng)頁布局設(shè)計(jì)時，一般設(shè)置3～5個斷點(diǎn)。由于主流的顯示設(shè)備一般有小屏幕、中屏幕、大屏幕3 類，因此一般情況下需要給每類設(shè)備設(shè)計(jì)對應(yīng)斷點(diǎn)布局才能保證兼容性。在網(wǎng)頁實(shí)現(xiàn)過程中，CSS 的媒體查詢功能可完成各斷點(diǎn)布局的樣式書寫，同時結(jié)合CSS 的過渡屬性一起使用，能讓布局在變化時有過渡效果，更有表現(xiàn)力。因此，采用Bootstrap框架能實(shí)現(xiàn)不同尺寸屏幕的頁面自適應(yīng)，提高開發(fā)效率。參考文獻(xiàn)：[1]王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計(jì)初探[J].北京印刷學(xué)院學(xué)報(bào)，2014（3）：1318.[2]陳員義，李藝志.基于Bootstrap響應(yīng)式Web前端研究[J].福建電腦，2015（12）：7275.[3]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應(yīng)式網(wǎng)頁設(shè)計(jì)與實(shí)現(xiàn)[J].北京印刷學(xué)院學(xué)報(bào)，2016，24（2）：4752.[4]賈英霞.淺談Bootstrap制作響應(yīng)式網(wǎng)站布局[J].福建電腦，2015（8）：122125.[5]成林.Bootstrap實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社，2013.[6]陳益全，吳多智.斷點(diǎn)在響應(yīng)式網(wǎng)頁設(shè)計(jì)中的應(yīng)用研究[J].微型電腦應(yīng)用，2016，32（5）：4144.[7]謝郁.CSS高效開發(fā)實(shí)戰(zhàn)：CSS3、LESS、SASS、BOOTSTRAP、FOUNDATION[M].北京：電子工業(yè)出版社，2014.[8]帕克.漸進(jìn)增強(qiáng)的Web設(shè)計(jì)[M].北京：人民郵電出版社，2014.（責(zé)任編輯：孫娟）