李慕+趙彤洲+周萍
摘要： Bootstrap框架采用CSS柵格系統對不同顯示設備具有自動適配能力。為使不同尺度、不同分辨率以及不同放置方向的顯示設備均能正常顯示網頁內容，需要設置合理的視口寬度斷點。通過對響應式網頁設計中斷點閾值設置方案、斷點圖繪制方法進行研究，提出了針對不同設備的斷點設定方案。實驗表明，該方案能適應主流顯示設備，在保持頁面內容不變的同時，實現多類型顯示設備的一致性顯示，進而大大縮減研發人員工作量。關鍵詞：響應式網頁設計；Bootstrap；媒體查詢；移動互聯網DOI：10.11907/rjdk.162795中圖分類號：TP306文獻標識碼：A 文章編號：16727800（2017）004002503
0引言 隨著移動互聯網的飛速發展，移動終端設備紛紛面市，這對網絡應用端的設計提出了新的要求。若要針對每一種終端各做一套頁面，會增加運營成本和后期維護成本。因此，一種能滿足各種設備分辨率，在不同屏幕、不同系統平臺環境下保持網頁布局的一致性，滿足用戶一致體驗的網頁已成為網頁設計的發展方向。響應式網頁設計能讓同一個頁面根據不同顯示設備的屏幕尺寸自動調整網頁布局，保證頁面呈現最佳顯示效果[1]。其中，網頁布局調整的閾值就是斷點，設置合適的斷點是開發高性能響應式網頁的重要節點。Bootstrap框架是目前較流行的響應式設計框架之一，本系統對Bootstrap框架下的斷點設置進行了研究，提出了能適應絕大多數設備的斷點設置方案。1響應式網頁設計1.1響應式網頁設計基本概念 “響應式網頁設計”是指該設計模式能根據顯示器尺寸、分辨率以及放置方向，自動調整頁面，使之能以最佳顯示模式呈現給用戶[2]。頁面設計應該遵循模塊化設計原則，使其能“可擴展、無浸染”，能適配任何型號的移動終端顯示器，無需另外開發“子網站”。簡言之，就是一個網站能夠兼容多個終端，而不是為每個終端做一個特定的版本。無論用戶正在使用筆記本電腦、iPad 還是智能手機，所要瀏覽的頁面能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備，即頁面能自動響應用戶的設備環境。〖JP〗1.2Bootstrap框架 Bootstrap框架是響應式網頁設計中運用比較廣泛的框架[3]。Bootstrap提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（Viewport）尺寸的增加，可以自動適配不同尺寸的顯示器[4]。表1 顯示了Bootstrap 的柵格系統在多種屏幕設備上的工作原理。柵格系統行為：柵格的排列方式；.container最大寬度：表示整個頁面的寬度；類前綴：代表不同尺寸屏幕設備，如.col-xs-就表示超小屏幕；列數：隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列；最大列（cloumn）寬：一般情況下不會改變列數，最大列寬取決于整個頁面的寬度；槽（gutter）寬：表示列與列之間的間距；（臨界）斷點：柵格系統行為發生變化的臨界點。 Bootstrap 柵格系統的工作原理如下[5]： （1）數據行（.row）必須包含在容器（.container）中，以便為其賦予合適的對齊方式和內距（padding）。如：
（2）在行（.row）中可以添加列（.column），但列數之和不能超過平分的總列數，比如12。如：
（3）具體內容應當放置在列容器（column）之內，而且只有列（column）才可以作為行容器（.row）的直接子元素。 （4）通過設置內距（padding）從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距（margin）來抵消內距（padding）的影響。 通過表1可以看出，Bootstrap中根據視口寬度設置了3個默認斷點，分別是768px、992px、1200px。這3個斷點包含4種情況：①超小屏幕（視口寬度小于768px），如手機；②小屏幕（視口寬度大于等于768px 且小于992px），如平板；③中等屏幕（視口寬度大于等于992px且小于1 200px），如桌面顯示器；④大屏幕（視口寬度大于等于1 200px），如大桌面顯示器。對于一個全尺寸顯示方案而言，斷點閾值的選擇成為響應式網頁設計的關鍵因素。2斷點在響應式網頁中的應用 斷點就是臨界點[6]。在臨界點上網頁的布局、功能、內容都可以根據當前顯示終端的尺寸、分辨率進行自適應匹配。斷點的設置與站點的內容、用戶設備的分辨率、用戶規模和成本計算都息息相關。2.1斷點閾值設置 在柵格系統中可以在Less文件中使用媒體查詢（media query）來設置斷點的閾值[7]。下面以Bootstrap中默認斷點閾值設置為例。 （1）超小屏幕（手機，小于 768px）。沒有任何媒體查詢相關代碼，在Bootstrap中是默認的，因為Bootstrap是移動設備優先。 （2）小屏幕（平板，大于等于 768px）。 @media （min-width：768px） { ...} （3）中等屏幕（桌面顯示器，大于等于 992px）。 @media （min-width：992px） { ...} （4）大屏幕（大桌面顯示器，大于等于 1200px）。 @media （min-width：1200px） { ...} 其中，min-width是定義輸出設備中的頁面最小可見區域寬度。Bootstrap采用的是移動優先，其特點是先考慮設計移動的樣式，再設置斷點，一步步向大尺寸增加樣式，因而采用min-width。除了Bootstrap中默認的斷點外，也可以使用媒體查詢設置其它需要的斷點。媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成，媒體查詢中可用于檢測的媒體特性有width、height和color等。在響應式的頁面使用媒體查詢可以針對不同的屏幕尺寸設置不同的樣式，在重置瀏覽器大小的過程中，頁面會根據瀏覽器的寬度和高度重新渲染頁面。2.2網頁設計中斷點選取 頁面設計要綜合考慮各類設備，通常包含面向PC端、面向PC+平板電腦端、面向平板電腦+手機端、僅有手機端以及全兼容這5種情況。 一般內容較簡單的站點如小公司網站及個人博客可以采用全兼容響應，因為制作成本相對較低，如imweb就是同一內容兼容所有平臺；而一些內容非常多、站點比較復雜的則可以采用兩種方案：pc+平板設計方案、手機設計方案，如攜程網就是這種模式。全兼容模式一般以內容體為流式，可以采用Bootstrap設置關鍵斷點，再額外增加一些局部斷點美化頁面以提升體驗；而PC端+平板電腦可以通過設置窄屏、寬屏、超大屏3個斷點來實現；最后對于只在手機端的顯示則可以不設置斷點，但得保證在各種分辨率下都訪問正常，這就要求對整行容器或者里面的部分內容進行流式布局，在一些特定的情況下也需要額外補充斷點。當前市場上，顯示設備呈多元化發展趨勢。常見的辦法是獲取主流顯示設備的分辨率，然后劃分出各類顯示設備的分辨率斷點，由此進行網頁布局設計就能滿足設備兼容的需要。2.3斷點圖繪制 斷點圖是將漸進增強模式可視化的一種圖形化方法[8]。所謂的漸進增強模式就是針對低版本瀏覽器進行頁面構建，保證最基本的功能，再針對高級瀏覽器進行效果、交互等改進并追加功能達到更好的用戶體驗。這種方法能實現小屏幕布局到大屏幕布局并流暢展示出來，繪制斷點圖能夠更好地幫助實現網頁布局。繪制斷點圖首先要確定斷點，然后在對應的斷點下方繪制網頁布局縮略圖，表示當視口大小達到該值時，將顯示該布局的效果。斷點圖又分3種類型，分別是帶有布局縮略圖的斷點圖、帶有次斷點的斷點圖和展示CSS 文件作用范圍的斷點圖。〖JP〗 （1）帶有布局縮略圖的斷點圖。帶有布局縮略圖的斷點圖，即簡單斷點圖，如圖1所示。 本例中斷點為768px 、992px和12 00px，含義是：視口小于768px，使用單列布局；視口大于等于768px 且小于992px 使用雙列布局；視口大于等于992px小于1 200px使用三列布局；視口大于1 200px使用五列布局。 （2）帶有次斷點的斷點圖。帶有次斷點的斷點圖是在簡單斷點圖的基礎上，把某一區域變化也表現出來。次斷點就是這個變化的區域，如圖2所示。 在本例中，次斷點用綠色區分其它區域，當視口大于等于768px 且小于850px 時，該區塊的布局效果與第一區塊呈兩列布局；其它情況下，該區塊和第一區塊呈兩行布局。 （3）展示CSS 文件作用范圍的斷點圖。在響應式網頁設計中，網頁根據視口尺寸呈現不同布局，為每一種布局創建單獨CSS 文件是有效管理樣式代碼的方法。可以把各個樣式文件的作用范圍添加到斷點圖中，讓設計人員更直觀地了解各CSS 文件的作用范圍，方便接下來編碼工作的規范開展，如圖3 所示。 在本例中，base.css 文件應用所有屏幕尺寸；minimum.css應用于小于768px的超小屏幕；small.css應用于大于等于768px 且小于992px 的小屏幕尺寸；medium.css 應用于大于等于992px 且小于1 200px 的中等屏幕尺寸；large.css 應用于大于等于1 200px 的大屏幕尺寸。2.4斷點在響應式網頁中的應用效果 Bootstrap框架通過設備頁面容器查詢進行自適應頁面匹配，它根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式。當頁面寬度調整時頁面會根據檢查到的斷點及其相應作用范圍的CSS文件而作出相應改變。下面以一個用Bootstrap框架寫的響應式網頁為例進行說明，該頁面中設置了3個斷點，其閾值分別為768px、992px、1 200px。 頁面視口大于1 200px時，頁面布局如圖4所示。在該頁面中主要以紅色方框標注的5個區域變化來說明斷點在響應式網頁中的重要應用。如圖5所示，1區域位于頁面最左邊，2、3、4、5區域呈現一行四列布局。 當頁面視口寬度逐漸減小至1 200px、992px、768px時，頁面布局都會根據CSS文件而作出相應改變。以視口寬度為768px為例，當頁面適口寬度逐漸縮小至768px時，圖4頁面布局發生了變化，圖4對應的1區域隱藏，2、3、4、5變為四行一列布局，其效果如圖5所示。3結語 斷點設置在響應式網頁設計中有著重要作用，根據移動設備和用戶需求合理地設置斷點極其重要。在進行響應式網頁布局設計時，一般設置3～5個斷點。由于主流的顯示設備一般有小屏幕、中屏幕、大屏幕3 類，因此一般情況下需要給每類設備設計對應斷點布局才能保證兼容性。在網頁實現過程中，CSS 的媒體查詢功能可完成各斷點布局的樣式書寫，同時結合CSS 的過渡屬性一起使用，能讓布局在變化時有過渡效果，更有表現力。因此，采用Bootstrap框架能實現不同尺寸屏幕的頁面自適應，提高開發效率。參考文獻：[1]王愉，潘明明.響應式網頁設計初探[J].北京印刷學院學報，2014（3）：1318.[2]陳員義，李藝志.基于Bootstrap響應式Web前端研究[J].福建電腦，2015（12）：7275.[3]舒后，熊一帆，葛雪嬌.基于Bootstrap框架的響應式網頁設計與實現[J].北京印刷學院學報，2016，24（2）：4752.[4]賈英霞.淺談Bootstrap制作響應式網站布局[J].福建電腦，2015（8）：122125.[5]成林.Bootstrap實戰[M].北京：機械工業出版社，2013.[6]陳益全，吳多智.斷點在響應式網頁設計中的應用研究[J].微型電腦應用，2016，32（5）：4144.[7]謝郁.CSS高效開發實戰：CSS3、LESS、SASS、BOOTSTRAP、FOUNDATION[M].北京：電子工業出版社，2014.[8]帕克.漸進增強的Web設計[M].北京：人民郵電出版社，2014.（責任編輯：孫娟）
