王　朋，董愛華，2，鮑萍萍（.東華大學信息科學與技術(shù)學院，上海20620；2.數(shù)字化紡織服裝技術(shù)教育部工程研究中心，上海20620）

?

響應式Web的研究與應用

王朋1，董愛華1，2，鮑萍萍1
（1.東華大學信息科學與技術(shù)學院，上海201620；2.數(shù)字化紡織服裝技術(shù)教育部工程研究中心，上海201620）

摘 要：隨著移動互聯(lián)網(wǎng)技術(shù)的迅速發(fā)展，互聯(lián)網(wǎng)上的移動設(shè)備呈爆炸性的增長。為了解決網(wǎng)站和未來新設(shè)備的兼容性和可訪問性，為PC端和移動端的用戶提供更加舒適的訪問界面和速度，將其設(shè)計成為響應式。分別對響應式元素及媒體、響應式伸縮布局、響應式字體和圖片、響應式框架進行了探討與研究，最終將響應式的有關(guān)技術(shù)應用到了B2C模式的電子商務網(wǎng)站的設(shè)計中。關(guān)鍵詞：移動設(shè)備；響應式；B2C

0　引言

中國移動互聯(lián)網(wǎng)用戶數(shù)量已超PC網(wǎng)民。據(jù)中國互聯(lián)網(wǎng)絡信息中心（CNNIC）數(shù)據(jù)顯示，截至2014年6月，中國移動互聯(lián)網(wǎng)用戶為5.27億，覆蓋率達83.4%，首次超越傳統(tǒng)PC整體80.9%的使用率，移動互聯(lián)網(wǎng)用戶成為第一大上網(wǎng)群體［1 -2］。

響應式網(wǎng)頁設(shè)計（RWD）是2010年伊?！ゑR克特（Ethan Marcotte）提出的。該技術(shù)是三種已有新技術(shù)——流動布局（fluid grids）、媒介查詢（media queries）和彈性圖片（scalable images）的結(jié)合［3 -4］。通過響應式的設(shè)計模式，能夠使網(wǎng)站隨著不同終端而做出自動的響應，動態(tài)地改變網(wǎng)頁的布局和元素的樣式，將同樣的內(nèi)容在不同終端下漂亮地呈現(xiàn)出來，如圖1所示。

從響應式Web設(shè)計的提出到2014年，業(yè)界對響應式Web的設(shè)計預測都很看好，2015年Web設(shè)計的趨勢預測中，響應式依然是熱點［5］。雖然已有的三項技術(shù)是響應式網(wǎng)頁設(shè)計的關(guān)鍵所在，但并不是全部。隨著各種各樣的互聯(lián)網(wǎng)終端設(shè)備的出現(xiàn)，響應式網(wǎng)頁面臨著設(shè)備的不兼容及運行效率低等眾多問題［6-7］。為此，本文對響應式網(wǎng)頁的設(shè)計提供了相關(guān)的技術(shù)手段和設(shè)計方法，并應用到了實踐中。

圖1　響應式網(wǎng)頁設(shè)計理論圖

1　響應式網(wǎng)站的設(shè)計方法

1.1使用view portm e ta標簽

在使用移動設(shè)備瀏覽網(wǎng)頁時，大多數(shù)瀏覽器會默認顯示普通頁面的尺寸。由于移動設(shè)備的分辨率較小，頁面元素會顯得不清晰。為此，可以使用viewportmeta標簽，它是一個虛擬“視窗”，能夠自動響應移動設(shè)備的寬和高，讓頁面的字體和圖片自適應地變得清晰。

在HTML的head部嵌入以下代碼就可以自動適應屏幕的寬高。

＜meta name=″viewport″content=″width =device-width，height=device-height，inital-scale=1.0，maximum-scale=1.0，user-scalable=no；″/＞

1.2CSS中的媒介查詢（Med ia Query）

@media查詢可以針對瀏覽器不同的視窗大小而設(shè)置不同的CSS樣式，當網(wǎng)頁在不同的終端設(shè)備上瀏覽時，頁面就可以響應不同的頁面布局，其CSS語法如下：

@media mediatype and|not|only（media feature）｛CSS -Code；｝

也可以針對不同的設(shè)備使用不同的stylesheets：

＜link rel=″stylesheet″media=″mediatype and|not|only（media feature）″href=″mystylesheet.css″＞

測試效果如圖2和圖3所示。

圖2　桌面設(shè)備

圖3　手機設(shè)備

1.3伸縮布局Flexbox

常規(guī)布局一般是基于塊和內(nèi)聯(lián)流的布局方式，其方向是一定的，缺乏靈活性。而Flexbox采用flexflow流的布局方式，它可以多方向布局網(wǎng)頁元素：從左到右，從右到左，從上到下，從下到上。

Flexbox布局是一種伸縮盒子模型，它能夠簡便地制作成具有伸縮功能的布局。采用Flex布局的元素，稱為Flex容器（flex container），簡稱“容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱“項目”［8］。Flexbox布局的思想是伸縮容器能夠靈活地改變伸縮項目的寬、高以及出現(xiàn)的順序，以最合理的布局方式填充屏幕。

考慮到瀏覽器的兼容性，任何容器只要加入下面語法就可以指定為Flex布局。

box｛display：-webkit-box；display：-moz-box；display：-ms-flexbox；disp lay：-webkit-flex；display：flex；｝

然后通過設(shè)置不同子元素的屬性就可以創(chuàng)建出響應式的彈性布局，測試效果如圖4、圖5和圖6所示。

1.4響應式文字和圖片

1.4.1響應式文字

響應式網(wǎng)頁不僅頁面布局能夠自適應地調(diào)整，文字和圖片也可以根據(jù)屏幕的尺寸而自動改變大小。通常用的字體單位em和rem是分別基于父級和根元素（htm l）而改變的，并不是相對于用戶的屏幕。對此，引用了一種新的字體大小單位：Viewport-Percentage Lengths［9］。

分別用vw、vh表示高度和寬度，一個單位等于視窗大小的1%。也可以通過vmin和vmax設(shè)置最大值和最小值（如：1vmin取1vw和1vh小的值）［9］。

圖4　PC端

圖5　平板

圖6　手機端

1.4.2彈性圖片

為了使圖片能響應瀏覽器的視窗大小，只需要為圖片設(shè)置下面的CSS樣式即可：

img｛ width：100%；height：auto；｝

1.5響應式框架

隨著移動終端的推廣，各種移動系統(tǒng)層出不窮，僅蘋果和安卓系統(tǒng)的尺寸就有多種規(guī)格，更何況其他的平板設(shè)備。為了統(tǒng)一移動設(shè)備的用戶界面（UI），提出了jQuery Mobile移動開發(fā)框架，因為它是單純使用HTML、CSS和JavaScript進行開發(fā)的，是移動瀏覽器的標準，所以能夠解決多種移動終端的兼容問題。

通過使用jQuery Mobile可以“寫更少的代碼，做更多的事情”，它可以通過一種靈活、簡單的方式來布局網(wǎng)頁［10］。要使用jQuery Mobile開發(fā)網(wǎng)頁，需要在網(wǎng)頁中引用JavaScript庫（.js）、CSS樣式表（.css）。

引用方式有兩種：一是從CDN中直接鏈接jQuery Mobile，二是從官網(wǎng)上下載進行應用。為了使用官方最新版本，本文采用第一種方式。直接將代碼復制到網(wǎng)頁的＜head＞中即可，其形式如下：

＜head＞＜link rel=″stylesheet″href=″http：//apps.bdimg.com/ libs/jquerymobile/1.4.2 /jqu ery.mobile.min.css″＞

＜script src=″http：//apps.bdimg.com/libs/jquery/1.10.2 /jquery. min.js″＞＜/script＞

＜script src=″http：//apps.bdimg.com/libs/jquerymobile/1.4.2 / jquery.mobile.min.js″＞＜/script＞＜/head＞

2　響應式網(wǎng)站的應用

2.1項目簡介

網(wǎng)上服裝商城是企業(yè)針對客戶建立的一個B2C模式的電子商務網(wǎng)站，通過線下倉庫與線上平臺，實現(xiàn)網(wǎng)上銷售服裝的功能。由于頁面采用了響應式的布局，因此用戶可以通過不同的終端設(shè)備瀏覽網(wǎng)站并且完成購貨功能，系統(tǒng)穩(wěn)定可靠，兼容性好。

2.2系統(tǒng)設(shè)計

系統(tǒng)分為兩大部分：前臺部分和后臺部分。前臺部分主要是針對用戶完成購物的功能，后臺是管理員系統(tǒng)，主要完成服裝的分類管理以及訂單管理等工作。本設(shè)計將網(wǎng)站建設(shè)成響應式網(wǎng)站，分別設(shè)計了前臺、后臺以及數(shù)據(jù)庫，最后對其進行了測試。

前臺（客戶購買）部分：針對用戶系統(tǒng)，主要包括注冊會員、登錄、查詢服裝、添加購物車、生成訂單及支付功能。

后臺（管理員管理）部分：整個系統(tǒng)的運行和服裝更新的重要部分，功能主要包括服裝的增添、訂單管理、刪除服裝、查看訂單詳細信息、發(fā)貨等。另外，還設(shè)置了用戶訪問權(quán)限，提高了后臺系統(tǒng)的安全性。

根據(jù)系統(tǒng)功能分析，設(shè)計系統(tǒng)前端功能模塊如圖7所示。

3　結(jié)論

本文從實際問題出發(fā)，針對網(wǎng)站開發(fā)過程中存在的問題，介紹了響應式網(wǎng)站的設(shè)計方法，為跨終端設(shè)備瀏覽網(wǎng)頁提供了可行的解決方案。最后把理論和實際結(jié)合在一起，開發(fā)了響應式網(wǎng)上服裝商城系統(tǒng)。

圖7　系統(tǒng)前端功能模塊圖

隨著越來越多的移動終端加入到互聯(lián)網(wǎng)中，移動互聯(lián)網(wǎng)已占有Internet的半壁江山。響應式網(wǎng)站可以給用戶提供更加舒適的界面和用戶體驗，已成為大勢所趨。雖然響應式網(wǎng)頁設(shè)計的優(yōu)點和趨勢已經(jīng)被廣泛地認同，但是由于許多前端工程師還對其不太熟悉，對響應式網(wǎng)站的設(shè)計模式還有許多技術(shù)上的難題，如對老版本IE支持不好、加載時間長等，因此它在短時間內(nèi)很難普及。但可以肯定，為了迎合未來移動互聯(lián)網(wǎng)的發(fā)展潮流，響應式網(wǎng)頁的設(shè)計將會是未來網(wǎng)站設(shè)計的主流。

參考文獻

［1］三川.CNNIC發(fā)布第35次《中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》［J］.中國遠程教育，2015（2）：31-31.

［2］趙大磊，張正平，賀松，等.基于Android的移動互聯(lián)網(wǎng)健康監(jiān)測系統(tǒng)的研究［J］.微型機與應用，2014，33（8）：10-12.

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

［4］洪勇軍.面向移動終端的屏幕自適應網(wǎng)頁設(shè)計［J］.微型機與應用，2014，33（3）：65-66.

［5］He Yuchan.Status and trends of responsive Web design［EB/OL］. （2015-09-18）［2016-12-20］http：//heyuchan.com/？p =720.

［6］余以勝.移動終端Web頁面的優(yōu)化處理研究［J］.電子技術(shù)應用，2014，40（7）：126-129.

［7］高集榮，田艷，江曉妍.基于樹結(jié)構(gòu)的Web頁面適配方法的研究［J］.微型機與應用，2014，33（1）：77-80.

［8］COYIER C.A complete guide to flexbox［EB/OL］.（2015-10-12）［2016-12-20］https：//css-tricks.com/snippets/css/aguide-to-flexbox/.

［9］ALLEN R.Responsive type and more with only CSS［EB/OL］. （2015-10-13）［2016-12-20］https：//medium.com/@ryanallencom/responsive-type-with-only-css-82b846370cc9#.4pa3sr xwa.

［10］W3CSCHOOL.jQuery mobile簡介［EB/OL］.（2015-12-01）［2016-12-20］http：//www.w3school.com.cn/jquerymobile/ jquerymobile-intro.asp.

王朋（1989 -），通信作者，男，碩士研究生，主要研究方向：Web開發(fā)技術(shù)。E-mail：pennywonder@163.com。

董愛華（1970 -），女，副教授，主要研究方向：服裝供應鏈建模與優(yōu)化，品牌服裝銷售預測及顧客服務建模及優(yōu)化。

鮑萍萍（1990 -），女，碩士研究生，主要研究方向：GPS無線通信、Android應用。

引用格式：王朋，董愛華，鮑萍萍.響應式Web的研究與應用［J］.微型機與應用，2016，35（10）：15-17，21.

Research and application on responsive Web

Wang Peng1，Dong Aihua1，2，Bao Pingping1
（1.College of Information Sciences and Technology，Donghua University，Shanghai201620，China；
2.Engineering Research Center of Digitized Textile&Fashion Technology，M inistry of Education，Shanghai201620，China）

Abstrac t：W ith the rapid development of Internet technology，mobile devices in the Internet are also have an explosive growth.In order to address the compatibility and accessibility issues between new equipment and website in the future，and provide more com fortable interface and the speed for PC and mobile's users，the article discussed the responsive elements and media，the responsive expansion layout，the responsive fonts and pictures，and the responsive frame.Finally the relevant technologies are used in the design of B2C e-commerce website.

Key w ords：mobile device；responsive；B2C

作者簡介：

收稿日期：（2016-01-22）

中圖分類號：TP393

文獻標識碼：A

DOI：10.19358 /j.issn.1674-7720.2016.09.006