武 昆，魏東嵐，李 家

(遼寧師范大學(xué) 城市與環(huán)境學(xué)院，遼寧 大連 116000)

基于響應(yīng)式設(shè)計的網(wǎng)站研究與實現(xiàn)

武 昆，魏東嵐，李 家

(遼寧師范大學(xué) 城市與環(huán)境學(xué)院，遼寧 大連 116000)

隨著移動互聯(lián)網(wǎng)的發(fā)展進(jìn)步，移動設(shè)備的不斷更新，人們更加習(xí)慣使用移動設(shè)備訪問網(wǎng)站。然而為每個設(shè)備設(shè)計特定的網(wǎng)站成本太高，因此，設(shè)計一個可以在任何設(shè)備上都擁有良好瀏覽效果的網(wǎng)站已經(jīng)成為網(wǎng)站設(shè)計與開發(fā)的關(guān)鍵。本文通過研究響應(yīng)式設(shè)計的相關(guān)技術(shù)以及相關(guān)腳本的運用，設(shè)計了一個測試性的新聞網(wǎng)站，使其能夠根據(jù)當(dāng)前主流設(shè)備的不同自行變換，調(diào)整布局，達(dá)到在不同設(shè)備上都擁有良好瀏覽體驗的目的。

網(wǎng)頁設(shè)計；響應(yīng)式設(shè)計；媒體查詢；切換式推出型導(dǎo)航

0 引言

隨著計算機(jī)技術(shù)以及移動互聯(lián)網(wǎng)的飛速發(fā)展，用戶使用移動設(shè)備上網(wǎng)已經(jīng)成為趨勢，面對不同大小的屏幕，傳統(tǒng)的網(wǎng)站設(shè)計已經(jīng)不能滿足人們的需求，人們迫切的需要網(wǎng)站能在任何大小的屏幕中完美運行，面對這種需求，響應(yīng)式設(shè)計通常是最好的選擇。

響應(yīng)式設(shè)計是一種方法，它能夠使網(wǎng)站在任何大小的屏幕上完美展示。而且響應(yīng)式設(shè)計方法可以讓設(shè)計者僅僅設(shè)計一套代碼來適應(yīng)任何大小的屏幕，這意味著設(shè)計者可以避免后期大量的維護(hù)工作，節(jié)省大量的時間去進(jìn)行內(nèi)容的優(yōu)化，使網(wǎng)站的效果趨近完美[1-3]。

與傳統(tǒng)的網(wǎng)站設(shè)計相比，響應(yīng)式設(shè)計體現(xiàn)了較低的成本、良好的視覺效果、較快的開發(fā)速度的優(yōu)勢，避免了繁瑣的操作[4]。利用響應(yīng)式設(shè)計方法，可以創(chuàng)造最佳的用戶體驗，有助于提高用戶的滿意度。

1 關(guān)鍵技術(shù)

響應(yīng)式設(shè)計從提出至今，一直不斷蔓延擴(kuò)散。隨著響應(yīng)式設(shè)計技術(shù)的不斷發(fā)展，越來越多的門戶網(wǎng)站將采用響應(yīng)式網(wǎng)站設(shè)計方法。響應(yīng)式設(shè)計的核心技術(shù)包含一下三個方面。

1.1 流式布局

傳統(tǒng)的固定布局已經(jīng)不適合如今用戶采用眾多設(shè)備上網(wǎng)的趨勢，響應(yīng)式設(shè)計避免了這種問題，采用流式布局的方法。

流式布局的核心就是將固定布局中以px為單位的左右固定寬度變成以%為單位的相對寬度。這里的%意味著寬度占其所在元素的百分比[5]。

1.2 媒體查詢

媒體查詢是響應(yīng)式設(shè)計的核心之一，是響應(yīng)式網(wǎng)站能對不同大小的設(shè)備做出響應(yīng)的關(guān)鍵。媒體查詢通常是以@media開頭，之后緊跟的是一個或多個表達(dá)式。在創(chuàng)建媒體查詢時，必須以媒體類型作為第一個表達(dá)式，例如：screen、print或者all等其它類型選項[6]。

1.3 圖片的響應(yīng)式設(shè)計

在網(wǎng)站設(shè)計中，圖片包含兩個部分，一是內(nèi)容圖片，它們擁有具體的意義，對于這些圖片，設(shè)計的思路為：當(dāng)視口寬度變小時，圖像也變小，這樣就不需要占用那么大的屏幕區(qū)域?？梢酝ㄟ^將圖像寬度設(shè)置為百分比，來使圖像尺寸變得更加靈活[7]。并不是所有的圖片都是內(nèi)容的一部分，也可以添加一些裝飾性的圖像，可以增加網(wǎng)站的設(shè)計感。這些圖片被稱為背景圖片，對于這些圖片，通常按照突出重點的原則設(shè)置[8]。

2 實現(xiàn)

2.1 移動優(yōu)先

移動優(yōu)先是指設(shè)計界面時優(yōu)先為小屏幕設(shè)計。從小屏幕寬度開始設(shè)計界面，將會迫使開發(fā)者關(guān)注網(wǎng)站內(nèi)容的精華。這里的寬度是指視口寬度，所謂視口寬度是指屏幕上顯示網(wǎng)站的區(qū)域，本文中提到的寬度都是指視口寬度。先為小屏幕設(shè)計布局之后，再將它變大時，將會有很多的空間用來繼續(xù)添加內(nèi)容，改變排版；如果先按照桌面尺寸進(jìn)行網(wǎng)站設(shè)計，雖然這樣做會令設(shè)計師感覺非常舒服，但當(dāng)寬度變小時，適合桌面尺寸寬度的布局將會有大量的內(nèi)容擁擠在小屏幕中，處理起來非常的麻煩?？傊?，小屏幕轉(zhuǎn)化為大屏幕遠(yuǎn)比大屏幕轉(zhuǎn)化成小屏幕要容易的多[9-11]。

2.2 設(shè)置視口

視口是計算機(jī)或設(shè)備屏幕上瀏覽網(wǎng)頁的那塊區(qū)域，在移動設(shè)備上，視口的寬度就是屏幕的寬度。通常情況下，移動設(shè)備訪問未設(shè)置viewport屬性的頁面時，會遵從桌面瀏覽器的寬度，按比例縮小來適應(yīng)手機(jī)的屏幕，瀏覽時還需要自行縮放，縮放的同時，還會出現(xiàn)滾動條，瀏覽非常不方便。對于響應(yīng)式網(wǎng)站，希望能夠按照移動設(shè)備真實的屏幕尺寸瀏覽頁面[12]。所以，應(yīng)該設(shè)置視口：

＜meta name="viewport"content="width=devicewidth,initial-scale=1" /＞

width=device-width告訴瀏覽器不管屏幕尺寸可能是多少都以全尺寸訪問頁面。所以，訪問頁面時，視口寬度就是設(shè)備的實際寬度，即100%。

屬性initial-scale是告訴瀏覽器在屏幕上首次加載網(wǎng)頁的時候如何縮放。initial-scale=1的意思是頁面既不會放大也不會縮小[13]。

2.3 實現(xiàn)媒體查詢

本文通過mqtest.io網(wǎng)站上獲取具體信息，以結(jié)果作為斷點。如圖所示。

圖1 平板電腦視口寬度Fig.1 The viewport width of IPAD

圖2 手機(jī)視口寬度Fig.2 The viewport width of mobile

可以看出，平板電腦的最大視口寬度為64 em，手機(jī)的視口寬度為22.5 em所以斷點設(shè)置為22.5 em、64 em。

@media only screen and (min-width: 64em) {/* css屬性設(shè)置 */}

@media only screen and (min-width: 22.5em) and (max-width:64em) {/* css屬性設(shè)置 */}

很多舊版本瀏覽器只支持css2版本的媒體查詢，不支持css3版本的媒體查詢，當(dāng)瀏覽器運行到媒體查詢這句話時，它們只能理解screen，不能理解and(min-width:65em)。瀏覽器本應(yīng)該跳過它們不理解的語句，但是對于媒體查詢，瀏覽器的運行方式有點不同，它們不是跳過整條語句，而是只跳過and(min-width:65em)。結(jié)果瀏覽器就會根據(jù)screen判斷這句話是真的，就會導(dǎo)致該媒體查詢應(yīng)用于任何大小的屏幕上。為了避免這種情況，加入only這個詞，能讓那些舊版本的瀏覽器跳過這句話[14]。

2.4 背景圖像設(shè)計

背景圖像是作為樣式應(yīng)用于元素的，因此，它永遠(yuǎn)不會超出元素的邊界，默認(rèn)情況下，背景圖像對齊與左上角，在實際中，背景圖像中能給用戶帶來深刻印象的部分不一定在左上角，此時使用backgroundposition屬性靈活設(shè)置對齊方向[15]。

footer{ background-image: url(Images/background 2.jpg); background-position: center;}

設(shè)置＜footer＞中的背景圖像對齊于中間。

2.5 導(dǎo)航變換

在響應(yīng)式設(shè)計中，有很多種導(dǎo)航變換方法，本文采用的是切換式推出型導(dǎo)航設(shè)計。所謂切換式推出型導(dǎo)航，即在默認(rèn)情況下，導(dǎo)航菜單隱藏，當(dāng)用戶需要使用導(dǎo)航菜單時，點擊圖標(biāo)，展開導(dǎo)航，同時菜單下拉時有過渡效果，具有層次感。這樣節(jié)省了屏幕空間，使屏幕整潔，給用戶帶來更好的瀏覽體驗[16]。本文通過對JavaScript的學(xué)習(xí)，完成導(dǎo)航變換。

圖3 桌面頁面footer元素樣式Fig.3 The footer elements of the desktop page

圖4 移動頁面footer元素樣式Fig.4 The footer elements of the mobile page

核心代碼：

_createToggle: function () {

var toggle = document.createElement("a");

toggle.innerHTML = opts.label;

setAttributes(toggle, {

"href": "#",

"class": "nav-toggle"

});

if (opts.insert === "before") {

nav.parentNode.insertBefore(toggle,

nav.nextSibling);

} else {

nav.parentNode.insertBefore(toggle, nav);

}

navToggle = toggle;

}

這段代碼作用為：在頁面添加一個切換鈕，并為其添加“href”、“class”屬性。然后在此切換鈕之前分配一個區(qū)域，此區(qū)域就是導(dǎo)航菜單的位置。再點擊切換鈕時，可以使切換鈕隨著導(dǎo)航菜單一并向下拉動，就像拉抽屜一樣，切換鈕相當(dāng)于拉手，給用戶帶來更好的帶入感。

resize: function () {

if (window.getComputedStyle(navToggle, null). getPropertyValue("display") !== "none") {

isMobile = true;

if (nav.className.match(/(^|s)closed(s|$)/)) {

nav.style.position = "absolute";

}

this._createStyles();

this._calcHeight();

} else {

isMobile = false;

nav.style.position = opts.openPos;

}

}

_createStyles: function () {

if (!styleElement.parentNode) {

styleElement.type = "text/css";

docu

ment.getElementsByTagName("head")[0].appendChil

d(styleElement);

}

}

_calcHeight: function () {

var savedHeight = 0;

for (var i = 0; i ＜ nav.inner.length; i++) {

savedHeight += nav.inner[i].offsetHeight;

}

var innerStyles = "." + opts.jsClass + " ." + opts.navClass + ".opened{max-height:" + savedHeight + "px } ";

if (styleElement.styleSheet) {

styleElement.styleSheet.cssText = inner-

Styles;

} else {

styleElement.innerHTML = innerStyles;

}

}

這端代碼的作用為：判斷是否為移動設(shè)備，如果是并且此時導(dǎo)航是隱藏狀態(tài)的時候，設(shè)置導(dǎo)航位置樣式為“絕對定位”。執(zhí)行“_createStyles”以及“_calcHeight”方法。如果不是移動設(shè)備，則設(shè)置導(dǎo)航位置樣式為openPos，即“相對定位”。

“_createStyles”方法作用為：為之前分配的導(dǎo)航菜單所在的區(qū)域創(chuàng)建新的樣式表，并將其保存在＜head＞標(biāo)簽中。

“_calcHeight”方法作用為：將切換區(qū)域的導(dǎo)航菜單的自身高度相加，得到切換區(qū)域的高度。根據(jù)切換區(qū)域的高度設(shè)置樣式并且動態(tài)的向“_createStyles”方法中創(chuàng)建的新樣式表中插入。

_transitions: function () {

if (opts.animate) {

var objStyle = nav.style,

transition = opts.transition + "ms";

objStyle.WebkitTransition

=objStyle.MozTransition =objStyle.OTransition

=objStyle.transition = transition;

}

}

這段代碼的作用是確定導(dǎo)航菜單下拉時過渡效果的執(zhí)行速度，同時針對低版本Safari 、Chrome、Firefox、Opera瀏覽器的支持做出處理。如果不設(shè)置執(zhí)行速度，網(wǎng)站也能運行，但是當(dāng)用戶點擊切換鈕時，導(dǎo)航菜單會瞬間全部出現(xiàn)在用戶眼前。設(shè)置執(zhí)行速度之后，導(dǎo)航菜單不會突兀的出現(xiàn)，能夠給用戶帶來更好的視覺體驗。

3 測試

將完成的網(wǎng)站分別在不同的設(shè)備上測試，最終效果如圖所示。

圖5 移動頁面效果圖Fig.5 The effect of mobile page

4 結(jié)語

在互聯(lián)網(wǎng)技術(shù)的發(fā)展過程中，隨著新設(shè)備的不斷出現(xiàn)和更新，人們對于網(wǎng)站的瀏覽效果越來越重視。響應(yīng)式設(shè)計今后會成為主流。本文對響應(yīng)式設(shè)計進(jìn)行了探索性研究，并初步設(shè)計了一個響應(yīng)式網(wǎng)站，主要取得了以下研究成果：

（1）本文初步探索響應(yīng)式設(shè)計的核心：流式布局、媒體查詢、圖片的響應(yīng)式設(shè)計，了解響應(yīng)式設(shè)計的方法，并設(shè)計了一個響應(yīng)式網(wǎng)站。

（2）本文還探索響應(yīng)式導(dǎo)航設(shè)計中的切換式推出型導(dǎo)航設(shè)計方法，利用腳本，成功完成。

圖6 桌面頁面效果圖Fig.6 The effect of desktop page

圖7 平板電腦效果圖Fig.7 The effect of IPAD

[1] Peterson C. 學(xué)習(xí)響應(yīng)式設(shè)計[M]. 文巍. 北京: 人民郵電出版社, 2015. Peterson C. Learning Responsive Web Design[M]. WEN W. Beijing: Posts & Telecom Press, 2015.

[2] 呂媛媛, 李可. 移動端應(yīng)用設(shè)計中的響應(yīng)式實現(xiàn)方法[J].軟件. 2016, 37(2): 107-109. LU Y Y, LI K. Methods of Responsive Mobile Application Design[J]. Software. 2016, 37(2): 107-109.

[3] 張景安, 張杰, 衛(wèi)澤丹. Android移動端瀏覽器的設(shè)計與開發(fā)[J]. 軟件. 2014, 35(8): 7-10. ZHANG J A, ZHANG J, WEI Z D. Design and Development of the Mobile Client Browser on Android[J]. Software. 2014, 35(8): 7-10.

[4] 吳文種. 響應(yīng)式動態(tài)網(wǎng)站建設(shè)的研究與應(yīng)用[J]. 福建電腦. 2015(1): 105-106. WU W Z. Research and application of responsive dynamic website construction[J]. Fujian Computer. 2015(1): 105-106.

[5] 張超. 響應(yīng)式網(wǎng)站的設(shè)計與開發(fā)[J]. 電子測試. 2015(16): 4. ZHANG C. The Design and Development of Responsive Website[J]. Electronic Test. 2015(16): 4.

[6] 戴慧萍. 響應(yīng)式設(shè)計對網(wǎng)頁界面的影響[J]. 藝術(shù)教育, 2015, 01: 250. DAI H P. The Influence of Responsive Design on Web Interface[J]. Art education. 2015, 01: 250.

[7] 蘇奎, 董默, 張彥超. 響應(yīng)式Web開發(fā)模式分析[J]. 軟件. 2015(6): 92-96. SU K, DONG M, ZHNG Y C. A Review of Responsive Web Development Patterns[J]. Software. 2015(6): 92-96.

[8] 張幸芝, 徐東東, 賈菲. 基于響應(yīng)式Web設(shè)計的教務(wù)系統(tǒng)移動平臺研究與建設(shè)[J]. 軟件. 2013(6): 5-7. ZHANG X Z, XU D D, JIA F. Responsive Web Design Based Educational Systems Research and Construction of Mobile Platforms[J]. Software. 2013(6): 5-7.

[9] 姜福成. 基于網(wǎng)頁平臺的移動文本編輯器的設(shè)計[J]. 軟件, 2013, 34(5): 12-15. JIANG F C. Web-platform-based Movable Text Editor Design[J]. Software. 2013, 34(5): 12-15.

[10] 陳曦. 面向多設(shè)備響應(yīng)式設(shè)計的機(jī)制研究[D]. 北京郵電大學(xué), 2014. CHEN X. Study of Multi-device Responsive Design Mechanism[D]. Beijing University of Posts and Telecommunications. 2014.

[11] 臧進(jìn)進(jìn), 鄂海紅. 基于響應(yīng)式Web設(shè)計的網(wǎng)頁生成系統(tǒng)研究與實現(xiàn)[J]. 軟件. 2015(6): 37-41. ZANG J J, E H H. Research and Implementation of the Web Page Generation System Based on Responsive Web Design[J]. Software. 2015(6): 37-41.

[12] 楊葉, 陳琳, 董啟標(biāo). 響應(yīng)式Web移動學(xué)習(xí)資源的技術(shù)實現(xiàn)與設(shè)計研究[J]. 現(xiàn)代教育技術(shù), 2013, (6): 107-111. YANG Y, CHEN L, DONG Q B. The Design and Technical Implementation of Responsive Web Mobile Learning Resources[J]. Modern Education Technology, 2013, (6): 107-111.

[13] 黃莉婷, 黎傳錦, 張凈. 響應(yīng)式網(wǎng)頁設(shè)計在伯樂相馬網(wǎng)的應(yīng)用[J]. 科技視界. 2015(30): 152-153. HUANG L T. LI C J, ZHANG J. In response to application of web design in the first network[J]. Science & Technology Vision. 2015(30): 152-153.

[14] 張蕙. 淺談網(wǎng)頁界面設(shè)計思路與實現(xiàn)[J]. 軟件. 2013, 34(1): 102-103. ZHANG H. On The Web Interface Design Ideas and Realization[J]. Software. 2013, 34(1): 102-103.

[15] 劉傳軍, 任鋼. 基于移動互聯(lián)網(wǎng)的山東消防移動指揮系統(tǒng)的設(shè)計和實現(xiàn)[J]. 軟件, 2014, 35(11): 14-21. LIU C J, REN G. Design and Application of Shandong Fire Mobile Command System based Mobile Internet[J]. Software, 2014, 35(11): 14-21.

[16] 茍強(qiáng)強(qiáng). 基于腳本指令的移動設(shè)備自適應(yīng)機(jī)制研究[J]. 軟件. 2014, 35(11): 1-4. GOU Q Q. Research on Mobile Device Adaptation System based on Script Command[J]. Software. 2014, 35(11): 1-4.

Research and Implementation of Website Based on Responsive Design

WU Kun1, WEI Dong-lan1, LI Jia1
(School of urban and Environmental Sciences, Liaoning Normal University, Dalian, Liaoning 116000, China)

With the development of mobile Internet and the continuous updating of mobile devices, people are more accustomed to using mobile devices to access the website. Designing specific website for each device is too expensive. Designing a website with good experience on any device is the key to the design and development of a website. This paper designed a news site. It can transform and adjust the layout according to the different devices through the study of the related technologies of responsive design and JavaScript. To achieve the purpose of good browsing experience on different devices.

Web design; Responsive design; Media query; Switch type push type navigation

TP393

A

10.3969/j.issn.1003-6970.2017.05.018

武昆(1994-)，男，碩士研究生，地理信息系統(tǒng)集成開發(fā)；魏東嵐(1972-），男，副教授，地理信息系統(tǒng)集成開發(fā)；李家(1957-)，男，副教授，地理信息系統(tǒng)集成開發(fā)。

本文著錄格式：武昆，魏東嵐，李家. 基于響應(yīng)式設(shè)計的網(wǎng)站研究與實現(xiàn)[J]. 軟件，2017，38（5）：83-88