陳益全，吳多智

?

斷點(diǎn)在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究

陳益全，吳多智

摘 要：指出使用智能移動(dòng)設(shè)備瀏覽傳統(tǒng)網(wǎng)頁(yè)時(shí)用戶體驗(yàn)方面的不足。介紹響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的概念、特點(diǎn)及優(yōu)勢(shì)。介紹斷點(diǎn)的概念、主流顯示設(shè)備分辨率情況、斷點(diǎn)圖的繪制方法、CSS媒體查詢的用法及Bootstrap默認(rèn)斷點(diǎn)設(shè)臵情況?？偨Y(jié)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中斷點(diǎn)的使用方法，為開(kāi)發(fā)實(shí)用性強(qiáng)且受用戶歡迎的網(wǎng)頁(yè)提供技術(shù)參考。

關(guān)鍵詞：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)；斷點(diǎn)；媒體查詢；網(wǎng)頁(yè)布局

0 引言

隨著智能移動(dòng)設(shè)備的普及，越來(lái)越多的人使用智能移動(dòng)設(shè)備上網(wǎng)。而傳統(tǒng)網(wǎng)頁(yè)都是針對(duì)桌面顯示屏幕開(kāi)發(fā)的，在智能移動(dòng)設(shè)備這類相對(duì)較小的屏幕中則網(wǎng)頁(yè)被縮小了，需要手動(dòng)放大和移動(dòng)來(lái)觀看，影響用戶體驗(yàn)。

開(kāi)發(fā)專門(mén)的手機(jī)網(wǎng)站是可選途徑，但市面上手機(jī)產(chǎn)品類型多樣屏幕尺寸不一，要想兼容各類顯示屏幕是很難做到的，而且同時(shí)運(yùn)行電腦版和手機(jī)版兩個(gè)網(wǎng)站，維護(hù)成本也是很高的。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能讓同一個(gè)網(wǎng)頁(yè)根據(jù)不同的顯示屏幕尺寸自動(dòng)調(diào)整網(wǎng)頁(yè)布局，保證網(wǎng)頁(yè)呈現(xiàn)最佳顯示效果。其中，網(wǎng)頁(yè)布局調(diào)整的閾值就是斷點(diǎn)。設(shè)置合適的斷點(diǎn)是開(kāi)發(fā)一個(gè)高性能的響應(yīng)式網(wǎng)頁(yè)的重要一環(huán)。

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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD，Responsive Web Design）能根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。無(wú)論用戶正在使用筆記本電腦、iPad還是智能手機(jī)，所要瀏覽的頁(yè)面能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備，即頁(yè)面能自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本［1］，如圖1所示:

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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不僅僅只是根據(jù)顯示設(shè)備的可視區(qū)域的大小改變網(wǎng)頁(yè)布局，而是采用“移動(dòng)優(yōu)先”的方式，首先針對(duì)小屏幕進(jìn)行設(shè)計(jì)，然后逐步增強(qiáng)針對(duì)大屏幕的設(shè)計(jì)與內(nèi)容。這與傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)方法先針對(duì)桌面電腦進(jìn)行固定寬度設(shè)計(jì)，然后將其縮小并針對(duì)小屏幕進(jìn)行內(nèi)容重排正好相反。簡(jiǎn)而言之，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是針對(duì)任意設(shè)備對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制［2］。

2 斷點(diǎn)的應(yīng)用

2.1 斷點(diǎn)的概念

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

2.2 主流顯示設(shè)備分辨率介紹

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

表1 主流顯示設(shè)備分辨率一覽表

2.3 斷點(diǎn)圖的繪制

了解主流顯示設(shè)備的分辨率情況后，接下來(lái)要構(gòu)思在相應(yīng)分辨率下網(wǎng)頁(yè)布局效果。繪制斷點(diǎn)圖是幫助我們進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的好方法。

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

2.3.1 帶有布局縮略圖的斷點(diǎn)圖

帶有布局縮略圖的斷點(diǎn)圖，也是簡(jiǎn)單斷點(diǎn)圖，如圖2所示：

圖2 帶有布局縮略圖的斷點(diǎn)圖示例

繪制斷點(diǎn)圖先確定斷點(diǎn)，本例中斷點(diǎn)為768px和1000px。然后把對(duì)應(yīng)斷點(diǎn)的網(wǎng)頁(yè)布局縮略圖繪制在相應(yīng)斷點(diǎn)下方，表示當(dāng)視口大小達(dá)到該值時(shí)顯示布局的效果。建議從小屏幕布局開(kāi)始設(shè)計(jì)，然后逐步擴(kuò)展到中屏幕、大屏幕、超大屏幕等。本例的含義是：視口小于768px，使用單列布局；視口大于等于768px且小于1000px使用雙列布局；視口大于等于1000px，使用三列布局。

2.3.2 帶有次斷點(diǎn)的斷點(diǎn)圖

帶有次斷點(diǎn)的斷點(diǎn)圖是在簡(jiǎn)單斷點(diǎn)圖的基礎(chǔ)上，把某一的區(qū)域的變化也表現(xiàn)出來(lái)。次斷點(diǎn)就是這個(gè)變化的區(qū)域。如圖3所示：

圖3 帶有次斷點(diǎn)的斷點(diǎn)圖示例

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

2.3.3 展示CSS文件作用范圍的斷點(diǎn)圖

在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)根據(jù)視口尺寸呈現(xiàn)不同布局，為每一種布局創(chuàng)建單獨(dú)CSS文件是有效管理樣式代碼的方法?？梢园迅鱾€(gè)樣式文件的作用范圍添加到斷點(diǎn)圖中，讓設(shè)計(jì)人員更直觀地了解各CSS文件的作用范圍，方便接下來(lái)編碼工作的規(guī)范開(kāi)展。如圖4所示：

圖4 展示CSS文件作用范圍的斷點(diǎn)圖示例

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

2.4 CSS媒體查詢介紹

怎么根據(jù)斷點(diǎn)圖實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)布局？那就離不開(kāi)CSS的媒體查詢（Media Query）功能。媒體查詢能通過(guò)設(shè)置條件與規(guī)則使樣式應(yīng)用于特定的設(shè)備范圍。使用CSS媒體查詢功能要了解移動(dòng)設(shè)備兼容、瀏覽器支持、常用語(yǔ)句三個(gè)方面的內(nèi)容。

2.4.1 移動(dòng)設(shè)備兼容

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

2.4.2 瀏覽器支持

IE8及以下版本瀏覽器不支持CSS媒體查詢功能。要讓CSS媒體查詢起作用，可以把瀏覽器升級(jí)到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 常用語(yǔ)句

CSS媒體查詢能根據(jù)視口尺寸來(lái)鏈接執(zhí)行對(duì)應(yīng)CSS文件。舉例：＜link rel="stylesheet" type="text/css" media="screen and （m in-w idth:1000px）" href="large.css">表示當(dāng)視口大于等于1000px時(shí)，鏈接large.css文件。

CSS媒體查詢能根據(jù)視口尺寸執(zhí)行特定CSS代碼。舉例：

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

body｛background:#CCC；｝｝

此段代碼表示當(dāng)視口小于等于480px時(shí)，網(wǎng)頁(yè)背景顏色為灰色。

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

body｛background: #CCC；｝｝

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

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

body｛background:#F00； ｝

｝

此段代碼表示當(dāng)視口大于等于768px且小于1000px時(shí)，網(wǎng)頁(yè)背景為紅色。

2.5 Bootstrap的默認(rèn)斷點(diǎn)介紹

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

/* 超小屏幕（手機(jī)，小于 768px） */

/* 沒(méi)有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap中是默認(rèn)的 */

/* 小屏幕（平板，大于等于 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設(shè)置了3個(gè)默認(rèn)斷點(diǎn)，分別768px，992px，1200px，包含4種情況：小于768px，大于等于768px且小于992px，大于等于992px且小于1200px，大于等于1200px，網(wǎng)頁(yè)會(huì)根據(jù)視口的大小來(lái)顯示相應(yīng)的布局。值得注意的是，以上代碼非原生CSS媒體查詢代碼，只限于在Bootstrap項(xiàng)目中使用。

3 總結(jié)

綜上所述，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，設(shè)置合適的斷點(diǎn)，讓網(wǎng)頁(yè)在特定屏幕中進(jìn)行布局調(diào)整來(lái)達(dá)到良好的顯示效果。在進(jìn)行響應(yīng)式網(wǎng)頁(yè)布局設(shè)計(jì)時(shí)，一般設(shè)置3到5個(gè)斷點(diǎn)。斷點(diǎn)至少有3個(gè)，因?yàn)橹髁鞯娘@示設(shè)備可分為小屏幕、中屏幕、大屏幕3類，給每類設(shè)備設(shè)計(jì)對(duì)應(yīng)斷點(diǎn)布局才能保證兼容性。如果設(shè)置5個(gè)斷點(diǎn)，可以按照小屏幕、中屏幕、中大屏幕、大屏幕、超大屏幕的設(shè)備類型來(lái)進(jìn)行布局。斷點(diǎn)不宜超過(guò)5個(gè)，否則網(wǎng)頁(yè)布局的復(fù)雜度和維護(hù)工作量將大大提高。確定斷點(diǎn)、繪制斷點(diǎn)圖是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的“藍(lán)圖”，網(wǎng)頁(yè)布局的“施工”主要是通過(guò)編寫(xiě)CSS代碼實(shí)現(xiàn)的。在網(wǎng)頁(yè)實(shí)現(xiàn)過(guò)程中，CSS的媒體查詢功能對(duì)各個(gè)斷點(diǎn)布局書(shū)寫(xiě)樣式，同時(shí)結(jié)合CSS的過(guò)渡（transition）屬性一起使用，讓布局在變化時(shí)有過(guò)渡效果，更有表現(xiàn)力。最后，在進(jìn)行響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)時(shí)，要多測(cè)試，定期維護(hù)，要能根據(jù)最新的主流設(shè)備尺寸進(jìn)行調(diào)整與適應(yīng)，才能開(kāi)發(fā)出實(shí)用性強(qiáng)且受用戶歡迎的網(wǎng)頁(yè)。

參考文獻(xiàn)

［1］ 百度百科.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)［EB/OL］.（2015-07-15）［2015-11-15］.http://baike.baidu.com/view/9876268.htm.

［2］ ［美］Ben Frain.響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)戰(zhàn)［M］.王永強(qiáng)譯.北京:人民郵電出版社，2013:3.

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

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

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

［6］ ［美］BenjaminLaGrone.響應(yīng)式Web設(shè)計(jì):HTML5和CSS3實(shí)踐指南［M］.黃博文，饒勛榮譯.北京:機(jī)械工業(yè)出版社，2014.

［7］ ［美］Tim Kadlec.響應(yīng)式Web設(shè)計(jì)實(shí)踐［M］.侯鴻儒譯.北京:人民郵電出版社，2013.

［8］ 張欣輝.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的研究［J］.電子技術(shù)與軟件工程，2014（18）:57.

［9］ 王愉，潘明明.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)初探［J］.北京印刷學(xué)院學(xué)報(bào)，2014，22（3）:13-15.

［10］ 楊彬.淺談響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)［J］.遼寧行政學(xué)院學(xué)報(bào)，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

中圖分類號(hào)：TP311

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：1007-757X（2016）05-0041-03

基金項(xiàng)目：瓊臺(tái)師范高等?？茖W(xué)校校級(jí)基金項(xiàng)目（qtky201501）；海南省高等學(xué)?？茖W(xué)研究項(xiàng)目（HnKy2016）

作者簡(jiǎn)介：陳益全（1984-），男，瓊臺(tái)師范學(xué)院，信息技術(shù)系，講師，軟件工程碩士，研究方向：計(jì)算機(jī)應(yīng)用，海南?？冢?71127吳多智（1982-），男，瓊臺(tái)師范學(xué)院，信息技術(shù)系，講師，軟件工程碩士，研究方向：電子商務(wù)，海南?？?，571127，

收稿日期:（2015.12.16）