斷點在響應式網頁設計中的應用研究

陳益全，吳多智

?

斷點在響應式網頁設計中的應用研究

陳益全，吳多智

摘 要：指出使用智能移動設備瀏覽傳統網頁時用戶體驗方面的不足。介紹響應式網頁設計的概念、特點及優勢。介紹斷點的概念、主流顯示設備分辨率情況、斷點圖的繪制方法、CSS媒體查詢的用法及Bootstrap默認斷點設臵情況。總結響應式網頁設計中斷點的使用方法，為開發實用性強且受用戶歡迎的網頁提供技術參考。

關鍵詞：響應式網頁設計；斷點；媒體查詢；網頁布局

0 引言

隨著智能移動設備的普及，越來越多的人使用智能移動設備上網。而傳統網頁都是針對桌面顯示屏幕開發的，在智能移動設備這類相對較小的屏幕中則網頁被縮小了，需要手動放大和移動來觀看，影響用戶體驗。

開發專門的手機網站是可選途徑，但市面上手機產品類型多樣屏幕尺寸不一，要想兼容各類顯示屏幕是很難做到的，而且同時運行電腦版和手機版兩個網站，維護成本也是很高的。

響應式網頁設計能讓同一個網頁根據不同的顯示屏幕尺寸自動調整網頁布局，保證網頁呈現最佳顯示效果。其中，網頁布局調整的閾值就是斷點。設置合適的斷點是開發一個高性能的響應式網頁的重要一環。

1 響應式網頁設計

響應式網頁設計（RWD，Responsive Web Design）能根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。無論用戶正在使用筆記本電腦、iPad還是智能手機，所要瀏覽的頁面能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備，即頁面能自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本［1］，如圖1所示:

圖1 響應式網頁設計

響應式網頁設計不僅僅只是根據顯示設備的可視區域的大小改變網頁布局，而是采用“移動優先”的方式，首先針對小屏幕進行設計，然后逐步增強針對大屏幕的設計與內容。這與傳統的網頁設計方法先針對桌面電腦進行固定寬度設計，然后將其縮小并針對小屏幕進行內容重排正好相反。簡而言之，響應式網頁設計是針對任意設備對網頁內容進行完美布局的一種顯示機制［2］。

2 斷點的應用

2.1 斷點的概念

斷點是一些臨界點，在這些臨界點上網頁的某些部分發生變化。網頁的布局變化、功能變化、內容變化都可以算是斷點［3］。本文主要討論在不同視口寬度情況下，網頁布局發生變化的情況。舉例：當視口小于等于600px時，網頁使用單列布局；當視口大于600px且小于800px時，網頁使用雙列布局；當視口大于等于800px時，網頁使用三列布局。這里的視口寬度600px、800px就是網頁布局變化的臨界點，即為斷點。斷點的值往往依照顯示設備的分辨率大小來設置，接下來就了解一下主流顯示設備的分辨率情況。

2.2 主流顯示設備分辨率介紹

當前市場上，顯示設備呈多元化發展。在PC領域，筆記本電腦的屏幕分辨率都在1200px以上，超過1600px的高分辨率桌面顯示器也被越來越多的用戶所接受。在智能移動設備和平板電腦領域，各種品牌、尺寸、性能、價格的產品如井噴一般，數不勝數。網頁設計師要為所有顯示設備專門設計網頁布局，不太現實也沒有必要。常見的辦法是獲取主流的顯示設備的分辨率，然后劃分出各類顯示設備的分辨率斷點，由此進行網頁布局設計就能滿足設備兼容的需要。主流顯示設備分辨率如表1所示。

表1 主流顯示設備分辨率一覽表

2.3 斷點圖的繪制

了解主流顯示設備的分辨率情況后，接下來要構思在相應分辨率下網頁布局效果。繪制斷點圖是幫助我們進行網頁布局設計的好方法。

什么是斷點圖？斷點圖是將漸進增強模式可視化的一種圖形化方法［3］，能把小屏幕布局到大屏幕布局展示出來。典型的斷點圖包括以下幾個部分：1、水平線，作用是定量刻度。2、線段或者塊，作用是表示范圍。3、點，即為斷點。3、文本，表示數值大小和內容說明。4、圖片，即為布局縮略圖。常見的斷點圖有3種，下面分別介紹。

2.3.1 帶有布局縮略圖的斷點圖

帶有布局縮略圖的斷點圖，也是簡單斷點圖，如圖2所示：

圖2 帶有布局縮略圖的斷點圖示例

繪制斷點圖先確定斷點，本例中斷點為768px和1000px。然后把對應斷點的網頁布局縮略圖繪制在相應斷點下方，表示當視口大小達到該值時顯示布局的效果。建議從小屏幕布局開始設計，然后逐步擴展到中屏幕、大屏幕、超大屏幕等。本例的含義是：視口小于768px，使用單列布局；視口大于等于768px且小于1000px使用雙列布局；視口大于等于1000px，使用三列布局。

2.3.2 帶有次斷點的斷點圖

帶有次斷點的斷點圖是在簡單斷點圖的基礎上，把某一的區域的變化也表現出來。次斷點就是這個變化的區域。如圖3所示：

圖3 帶有次斷點的斷點圖示例

次斷點用不同的顏色（橙色）加于區分其他區域。在本例中，當視口大于等于480px且小于768px時，該區塊的布局效果是和第一區塊呈兩列布局，其它情況下，該區塊和第一區塊呈兩行布局。

2.3.3 展示CSS文件作用范圍的斷點圖

在響應式網頁設計中，網頁根據視口尺寸呈現不同布局，為每一種布局創建單獨CSS文件是有效管理樣式代碼的方法。可以把各個樣式文件的作用范圍添加到斷點圖中，讓設計人員更直觀地了解各CSS文件的作用范圍，方便接下來編碼工作的規范開展。如圖4所示：

圖4 展示CSS文件作用范圍的斷點圖示例

在本例中，base.css文件應用所有屏幕尺寸；small.css應用于大于等于480px且小于768px的小屏幕尺寸；medium.css應用于大于等于768px且小于1000px的中等屏幕尺寸；large.css應用于大于等于1000px的大屏幕尺寸。

2.4 CSS媒體查詢介紹

怎么根據斷點圖實現響應式網頁布局？那就離不開CSS的媒體查詢（Media Query）功能。媒體查詢能通過設置條件與規則使樣式應用于特定的設備范圍。使用CSS媒體查詢功能要了解移動設備兼容、瀏覽器支持、常用語句三個方面的內容。

2.4.1 移動設備兼容

在HTML文檔中添加此條代碼：＜meta name="viewport" content="w idth=device-w idth， initial-scale=1.0， maximum-scale=1.0， user-scalable=no">。它的主要作用是按設備的寬度顯示網頁，同時禁止手動縮放網頁，這樣就能讓移動設備正常顯示響應式網頁了。

2.4.2 瀏覽器支持

IE8及以下版本瀏覽器不支持CSS媒體查詢功能。要讓CSS媒體查詢起作用，可以把瀏覽器升級到IE9以上版本，或者加載外部JavaScript文件讓IE8瀏覽器支持CSS媒體查詢。參考代碼如下：

＜！--［if lt IE 9］>

＜script

src="https://oss.maxcdn.com/libs/htm l5shiv/3.7.0/htm l5shiv.js">＜/script>

＜script

src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.m in. js">＜/script>

＜！［endif］-->

2.4.3 常用語句

CSS媒體查詢能根據視口尺寸來鏈接執行對應CSS文件。舉例：＜link rel="stylesheet" type="text/css" media="screen and （m in-w idth:1000px）" href="large.css">表示當視口大于等于1000px時，鏈接large.css文件。

CSS媒體查詢能根據視口尺寸執行特定CSS代碼。舉例：

@media （max-w idth: 480px）｛

body｛background:#CCC；｝｝

此段代碼表示當視口小于等于480px時，網頁背景顏色為灰色。

@media screen and （max-w idth: 480px）｛

body｛background: #CCC；｝｝

此段代碼功能同上，但添加了單詞“screen and”表示在屏幕上顯示時用無襯線字體，打印頁面時使用襯線字體。

@media screen and （m in-w idth:768px） and （max-width:999px）｛

body｛background:#F00； ｝

｝

此段代碼表示當視口大于等于768px且小于1000px時，網頁背景為紅色。

2.5 Bootstrap的默認斷點介紹

Bootstrap是目前廣受歡迎的商用的開源前端框架，能使網頁開發更加方便快捷。Bootstrap是基于響應式網頁設計理念的，使用它開發的網頁能兼容手機、平板、PC 等設備。其設置的斷點具有一定的參考借鑒作用，媒體查詢和關鍵斷點如以下代碼所示：

/* 超小屏幕（手機，小于 768px） */

/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap中是默認的 */

/* 小屏幕（平板，大于等于 768px） */ @media （m in-w idth: @screen-sm-m in） ｛ ... ｝

/* 中等屏幕（桌面顯示器，大于等于 992px） */ @media （min-w idth: @screen-md-min） ｛ ... ｝

/* 大屏幕（大桌面顯示器，大于等于 1200px） */ @media （m in-w idth: @screen-lg-min） ｛ ... ｝ ［4］

Bootstrap設置了3個默認斷點，分別768px，992px，1200px，包含4種情況：小于768px，大于等于768px且小于992px，大于等于992px且小于1200px，大于等于1200px，網頁會根據視口的大小來顯示相應的布局。值得注意的是，以上代碼非原生CSS媒體查詢代碼，只限于在Bootstrap項目中使用。

3 總結

綜上所述，響應式網頁設計中，設置合適的斷點，讓網頁在特定屏幕中進行布局調整來達到良好的顯示效果。在進行響應式網頁布局設計時，一般設置3到5個斷點。斷點至少有3個，因為主流的顯示設備可分為小屏幕、中屏幕、大屏幕3類，給每類設備設計對應斷點布局才能保證兼容性。如果設置5個斷點，可以按照小屏幕、中屏幕、中大屏幕、大屏幕、超大屏幕的設備類型來進行布局。斷點不宜超過5個，否則網頁布局的復雜度和維護工作量將大大提高。確定斷點、繪制斷點圖是響應式網頁設計的“藍圖”，網頁布局的“施工”主要是通過編寫CSS代碼實現的。在網頁實現過程中，CSS的媒體查詢功能對各個斷點布局書寫樣式，同時結合CSS的過渡（transition）屬性一起使用，讓布局在變化時有過渡效果，更有表現力。最后，在進行響應式網頁設計時，要多測試，定期維護，要能根據最新的主流設備尺寸進行調整與適應，才能開發出實用性強且受用戶歡迎的網頁。

參考文獻

［1］ 百度百科.響應式網頁設計［EB/OL］.（2015-07-15）［2015-11-15］.http://baike.baidu.com/view/9876268.htm.

［2］ ［美］Ben Frain.響應式Web設計:HTML5和CSS3實戰［M］.王永強譯.北京:人民郵電出版社，2013:3.

［3］ ［美］Stephen Hay.響應式Web設計全流程解析［M］.余果等譯.北京:人民郵電出版社，2014:90.

［4］ Bootstrap中文網.全局CSS樣式［EB/OL］.［2015-08-15］. http://v3.bootcss.com/css/.

［5］ ［美］Luke W roblewski，［美］Ethan Marcotte.響應式Web設計全流程解析［M］.司徒卓恆譯.北京:人民郵電出版社，2014.

［6］ ［美］BenjaminLaGrone.響應式Web設計:HTML5和CSS3實踐指南［M］.黃博文，饒勛榮譯.北京:機械工業出版社，2014.

［7］ ［美］Tim Kadlec.響應式Web設計實踐［M］.侯鴻儒譯.北京:人民郵電出版社，2013.

［8］ 張欣輝.響應式網頁設計的研究［J］.電子技術與軟件工程，2014（18）:57.

［9］ 王愉，潘明明.響應式網頁設計初探［J］.北京印刷學院學報，2014，22（3）:13-15.

［10］ 楊彬.淺談響應式網頁設計［J］.遼寧行政學院學報，2014，16（5）:161.

Research on App lication of Breakpoints in Responsive Web Design

Chen Yiquan， Wu Duozhi
（Qiongtai Teachers College， Haikou 571127， China）

Abstract:This paper pointed out the poor user experience of browsing the traditional web pages by using a smart mobile device. Then it introduced the concept， features and advantages of responsive web design. A fter that， it also introduced the concept of the breakpoint， resolution of the mainstream display device， draw ing method of the breakpoints graph， usage of CSS media query and default setting of breakpoints in Bootstrap project. Finally it summarized the use of breakpoints in responsive web design， and provide technical reference for the development of practical and popular web pages.

Key words:Responsive Web Design； Breakpoints； Media Query； Web Layout

中圖分類號：TP311

文獻標志碼：A

文章編號：1007-757X（2016）05-0041-03

基金項目：瓊臺師范高等專科學校校級基金項目（qtky201501）；海南省高等學校科學研究項目（HnKy2016）

作者簡介：陳益全（1984-），男，瓊臺師范學院，信息技術系，講師，軟件工程碩士，研究方向：計算機應用，海南海口，571127吳多智（1982-），男，瓊臺師范學院，信息技術系，講師，軟件工程碩士，研究方向：電子商務，海南海口，571127，

收稿日期:（2015.12.16）