基于響應式設計的網站研究與實現

武 昆，魏東嵐，李 家

(遼寧師范大學 城市與環境學院，遼寧 大連 116000)

基于響應式設計的網站研究與實現

武 昆，魏東嵐，李 家

(遼寧師范大學 城市與環境學院，遼寧 大連 116000)

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

網頁設計；響應式設計；媒體查詢；切換式推出型導航

0 引言

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

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

與傳統的網站設計相比，響應式設計體現了較低的成本、良好的視覺效果、較快的開發速度的優勢，避免了繁瑣的操作[4]。利用響應式設計方法，可以創造最佳的用戶體驗，有助于提高用戶的滿意度。

1 關鍵技術

響應式設計從提出至今，一直不斷蔓延擴散。隨著響應式設計技術的不斷發展，越來越多的門戶網站將采用響應式網站設計方法。響應式設計的核心技術包含一下三個方面。

1.1 流式布局

傳統的固定布局已經不適合如今用戶采用眾多設備上網的趨勢，響應式設計避免了這種問題，采用流式布局的方法。

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

1.2 媒體查詢

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

1.3 圖片的響應式設計

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

2 實現

2.1 移動優先

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

2.2 設置視口

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

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

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

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

2.3 實現媒體查詢

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

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

圖2 手機視口寬度Fig.2 The viewport width of mobile

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

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

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

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

2.4 背景圖像設計

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

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

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

2.5 導航變換

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

圖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”屬性。然后在此切換鈕之前分配一個區域，此區域就是導航菜單的位置。再點擊切換鈕時，可以使切換鈕隨著導航菜單一并向下拉動，就像拉抽屜一樣，切換鈕相當于拉手，給用戶帶來更好的帶入感。

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;

}

}

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

“_createStyles”方法作用為：為之前分配的導航菜單所在的區域創建新的樣式表，并將其保存在＜head＞標簽中。

“_calcHeight”方法作用為：將切換區域的導航菜單的自身高度相加，得到切換區域的高度。根據切換區域的高度設置樣式并且動態的向“_createStyles”方法中創建的新樣式表中插入。

_transitions: function () {

if (opts.animate) {

var objStyle = nav.style,

transition = opts.transition + "ms";

objStyle.WebkitTransition

=objStyle.MozTransition =objStyle.OTransition

=objStyle.transition = transition;

}

}

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

3 測試

將完成的網站分別在不同的設備上測試，最終效果如圖所示。

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

4 結語

在互聯網技術的發展過程中，隨著新設備的不斷出現和更新，人們對于網站的瀏覽效果越來越重視。響應式設計今后會成為主流。本文對響應式設計進行了探索性研究，并初步設計了一個響應式網站，主要取得了以下研究成果：

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

（2）本文還探索響應式導航設計中的切換式推出型導航設計方法，利用腳本，成功完成。

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

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

[1] Peterson C. 學習響應式設計[M]. 文巍. 北京: 人民郵電出版社, 2015. Peterson C. Learning Responsive Web Design[M]. WEN W. Beijing: Posts & Telecom Press, 2015.

[2] 呂媛媛, 李可. 移動端應用設計中的響應式實現方法[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] 張景安, 張杰, 衛澤丹. Android移動端瀏覽器的設計與開發[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] 吳文種. 響應式動態網站建設的研究與應用[J]. 福建電腦. 2015(1): 105-106. WU W Z. Research and application of responsive dynamic website construction[J]. Fujian Computer. 2015(1): 105-106.

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

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

[7] 蘇奎, 董默, 張彥超. 響應式Web開發模式分析[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] 張幸芝, 徐東東, 賈菲. 基于響應式Web設計的教務系統移動平臺研究與建設[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] 姜福成. 基于網頁平臺的移動文本編輯器的設計[J]. 軟件, 2013, 34(5): 12-15. JIANG F C. Web-platform-based Movable Text Editor Design[J]. Software. 2013, 34(5): 12-15.

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

[11] 臧進進, 鄂海紅. 基于響應式Web設計的網頁生成系統研究與實現[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] 楊葉, 陳琳, 董啟標. 響應式Web移動學習資源的技術實現與設計研究[J]. 現代教育技術, 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] 黃莉婷, 黎傳錦, 張凈. 響應式網頁設計在伯樂相馬網的應用[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] 張蕙. 淺談網頁界面設計思路與實現[J]. 軟件. 2013, 34(1): 102-103. ZHANG H. On The Web Interface Design Ideas and Realization[J]. Software. 2013, 34(1): 102-103.

[15] 劉傳軍, 任鋼. 基于移動互聯網的山東消防移動指揮系統的設計和實現[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] 茍強強. 基于腳本指令的移動設備自適應機制研究[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-)，男，碩士研究生，地理信息系統集成開發；魏東嵐(1972-），男，副教授，地理信息系統集成開發；李家(1957-)，男，副教授，地理信息系統集成開發。

本文著錄格式：武昆，魏東嵐，李家. 基于響應式設計的網站研究與實現[J]. 軟件，2017，38（5）：83-88