響應式網(wǎng)頁設計案例實現(xiàn)與分析

吳多智， 陳益全

（瓊臺師范高等專科學校, 海南　?？凇?71127）

?

響應式網(wǎng)頁設計案例實現(xiàn)與分析

吳多智， 陳益全

（瓊臺師范高等專科學校, 海南?？?71127）

摘要：指出傳統(tǒng)網(wǎng)站對各類智能移動設備的兼容性不足。介紹響應式網(wǎng)頁設計的概念、設計思想、相關技術等。以實際案例講解響應式網(wǎng)頁的設計與制作流程。分析與總結響應式網(wǎng)頁設計的步驟與技術要點，為響應式網(wǎng)站開發(fā)提供技術參考。

關鍵詞：響應式網(wǎng)頁設計；網(wǎng)頁案例；網(wǎng)頁制作；網(wǎng)頁分析

一、引言

在當今移動互聯(lián)網(wǎng)時代，人們更多的使用智能移動設備瀏覽網(wǎng)站。對于傳統(tǒng)的針對顯示器屏幕開發(fā)的網(wǎng)站，對各種屏幕尺寸不一的智能移動設備在兼容性方面表現(xiàn)出嚴重不足。其中一種解決方案是另外專門開發(fā)移動版網(wǎng)站，但會使得成本提高。另外一種解決方案是對原有網(wǎng)站按照響應式網(wǎng)頁設計方式重構，讓網(wǎng)站能夠兼容各式各樣的瀏覽器分辨率以及不同移動設備，而不是為每個終端做一個特定的版本，成本不高。響應式網(wǎng)頁設計憑借其優(yōu)勢在越來越多的網(wǎng)站中被運用。本文以一個案例來講解與分析響應式網(wǎng)頁的設計實現(xiàn)過程，望能為網(wǎng)頁前端工程師進行響應式網(wǎng)站開發(fā)提供參考。

二、響應式網(wǎng)頁設計案例實現(xiàn)

（一）概念介紹

響應式網(wǎng)頁設計(Responsive Web design)指頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調(diào)整。無論用戶正在使用筆記本電腦、iPad還是智能手機，所要瀏覽的頁面能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。

（二）設計思想

進行響應式網(wǎng)頁開發(fā)，應遵循“移動優(yōu)先、漸進增強”的設計思想?！耙苿觾?yōu)先”指由于移動設備尺寸多種多樣，在布局與顯示效果方面考慮較多，先針對移動設備進行設計，有利于提高響應式網(wǎng)頁的開發(fā)效率?！皾u進增強”指響應式網(wǎng)頁從小屏幕向大屏幕的順序進行開發(fā)，在小屏幕中，顯示空間有限，網(wǎng)頁要突出主要內(nèi)容，表現(xiàn)方面有所簡化，隨著屏幕增大，網(wǎng)頁表現(xiàn)的效果越來越豐富。“漸進增強”另一方面指讓網(wǎng)頁兼容各類版本的瀏覽器的情況下，為高級瀏覽器追加新效果以提高用戶體驗。

響應式網(wǎng)頁在不同尺寸的設備中顯示不同的布局。在進行網(wǎng)頁布局設計時，繪制斷點圖是有效的方法，如圖1所示。該斷點圖的含義是：屏幕尺寸小于640像素，顯示（針對小屏幕的）單列布局；屏幕尺寸大于等于640像素且小于960像素，顯示（針對中等屏幕的）雙列布局；屏幕尺寸大于等于960像素，顯示（針對大屏幕的）三列布局。

圖1　響應式網(wǎng)頁設計斷點圖

根據(jù)斷點圖，按照“移動優(yōu)先、漸進增強”的設計思想，從單列布局、雙列布局、三列布局的順序進行制作，先使用DIV+CSS實現(xiàn)響應式布局，然后給頁面中添加具體內(nèi)容并美化頁面，就能快速開發(fā)出兼容性良好的響應式網(wǎng)頁。

（三）相關技術

開發(fā)響應式網(wǎng)頁的技術包括常規(guī)網(wǎng)頁開發(fā)的HTML、HTML5、CSS、JavaScript技術，還使用到了彈性圖片技術和CSS3的Media Query（媒體查詢）等。媒體查詢是指通過不同的媒體類型和條件定義樣式表規(guī)則。媒體查詢讓CSS可以更精確作用于不同的媒體類型和同一媒體的不同條件。簡單的理解就是媒體查詢讓網(wǎng)頁根據(jù)設備屏幕尺寸顯示單列布局、雙列布局還是三列布局。

（四）編碼實現(xiàn)

1.移動設備兼容

2.桌面瀏覽器兼容

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

3.網(wǎng)頁單列布局實現(xiàn)

單列布局是網(wǎng)頁在小屏幕設備（豎置各類手機、小型平板電腦）上的顯示效果，其顯示尺寸在640像素以下。這種布局讓所有內(nèi)容區(qū)域根據(jù)屏幕大小各顯示為一列，其實現(xiàn)要點是：給所有元素設置寬度屬性width:100%;。

在HTML文件中添加第一組div，給最外層的div命名為“all”，在它里面分成網(wǎng)頁三個主要區(qū)域，頭部“header”、主體“main”和底部“footer”。代碼如下：

主要的CSS代碼:.all{width:100%;max-width: 1000px;margin:0 auto;}表示該元素按照瀏覽器窗口大小自動調(diào)整自身寬度，但自身寬度最大為1000像素，同時該盒子居中顯示。.header,.main,.footer {width:100%;}表示這三個元素同父元素一樣寬度。

在header、main、footer這三個元素中添加新的div表示相應的內(nèi)容區(qū)域，設置它們的CSS屬性width: 100%并給height屬性設置確定的值。在單列布局中，要讓某個元素不顯示就使用display:none;語句。

為了便于實時觀察布局效果，要給每個布局div元素設置width、height、background屬性。

4.網(wǎng)頁雙列布局實現(xiàn)

雙列布局是在中等屏幕（橫置大屏手機、平板電腦）設備上顯示的效果。其顯示尺寸范圍在640像素到959像素之間。為達到兼容雙列布局，CSS代碼中要使用媒體查詢功能，即添加語句@media screen and(min-width:640px)and(max-width:959px){/*雙列布局的CSS代碼全都寫在此處*/}。雙列布局的實現(xiàn)要點是：給雙列布局的元素設置寬度屬性width: 49%;（49%是參考值，可根據(jù)實際情況調(diào)整）和浮動屬性float。為了避免各浮動元素緊挨排列，可使用外邊距margin屬性來調(diào)節(jié)。代碼舉例：

HTML代碼：

CSS代碼：

@media screen and(min-width:640px)and (max-width:959px){

.main.tile{width:49%;float:left;height:200px; mragin-bottom:10px;background:blue;}

.main.right{float:right;}

}

5.網(wǎng)頁三列布局實現(xiàn)

三列布局是在大屏幕（橫置平板電腦、桌面顯示器）設備上顯示的效果。其顯示尺寸在960像素以上。即添加語句@media screen and(min-width:960px){/*三列布局的CSS代碼全都寫在此處*/}。三列布局就包含網(wǎng)頁所有的內(nèi)容區(qū)域。在單列布局、雙列布局中不顯示的元素在三列布局中都要顯示出來，給對應元素使用display:block;語句。三列布局的實現(xiàn)要點是：給元素的寬度屬性width設置合適的百分比，并使用浮動屬性float。

代碼舉例：

HTML代碼：

CSS代碼：

.main.primary{width:70%;float:left;}

.primary.left{width:58%;float:left;height:300px;}

.primary.right{width:40%;float:right;height: 300px;}

.main.sidebar{width:28.6%;float:right;}

6.網(wǎng)頁效果展示

通過編碼實現(xiàn)響應式網(wǎng)頁的單列布局、雙列布局、三列布局，響應式網(wǎng)頁的“框架”就搭好了。如圖2所示。

圖2　響應式網(wǎng)頁布局效果

接下來進行最終頁面的實現(xiàn)，給網(wǎng)頁中添加具體的內(nèi)容，如網(wǎng)站標題、網(wǎng)站菜單、網(wǎng)站各類新聞、網(wǎng)站各類功能入口等，并對這些添加的內(nèi)容進行美化。在“移動版”的顯示效果中，體現(xiàn)內(nèi)容突出、頁面簡潔等風格。在“桌面版”的顯示效果中，在保持網(wǎng)頁風格一致的前提下，適當添加特效功能、讓頁面表現(xiàn)更豐富、進一步提高用戶體驗。如圖3所示。

圖3　響應式網(wǎng)頁最終效果

當網(wǎng)站首頁制作完成后，使用同樣的制作流程把其他頁面（如文章列表頁、網(wǎng)站內(nèi)容頁等）也實現(xiàn)出來，然后結合網(wǎng)站后臺管理系統(tǒng)，響應式網(wǎng)站就開發(fā)出來了。

四、分析與結論

響應式網(wǎng)頁設計的一般步驟是：根據(jù)網(wǎng)站“原型效果圖”，確認其在不同尺寸設備中要實現(xiàn)的各類布局效果，繪制斷點圖輔助設計，按照“移動優(yōu)先、漸進增強”的思想，先實現(xiàn)響應式布局、然后添加具體網(wǎng)頁內(nèi)容進而實現(xiàn)整個頁面。

響應式網(wǎng)頁設計中的技術要點包括：1.設置網(wǎng)頁元素的寬度或元素之間的左右距離大小時，要使用百分比，而不使用像素值。例如，width:90%;或marginleft:2%;，這樣才能使得網(wǎng)頁布局隨著顯示設備的尺寸來變化。2.在小屏幕布局中，某些網(wǎng)頁元素不顯示，為其添加display:none;。在大屏幕布局中，要其顯示則添加display:block;。3.合理使用媒體查詢，布局效果在三至五種為宜。三種布局效果可以兼容小、中、大屏幕。五種布局效果進一步細分可兼容小、中、中大、大、超大屏幕。布局效果少于三種，兼容性不好；超過五種，則設計實現(xiàn)與管理維護難度明顯提高，性價比不高。4.有針對性的應用彈性圖片、JavaScript特效和CSS3的各類屬性如圓角、陰影、背景漸變、過渡、變形、動畫等效果給網(wǎng)頁增加更豐富的顯示效果，體現(xiàn)“漸進增強”設計思想，給用戶增加良好體驗。

響應式網(wǎng)頁設計已成為當今網(wǎng)頁開發(fā)的主流。網(wǎng)頁前端工程師要在熟練掌握相關技術前提下，多編碼多測試多維護多總結，才能與時俱進，開發(fā)出性能良好且受用戶歡迎的網(wǎng)站。

參考文獻：

[1]百度百科.響應式網(wǎng)頁設計 [EB/OL].(2015-07-15)[2015-12-10].http://baike.baidu.com/view/9876268.htm.

[2]密海英.面向不同設備的響應式網(wǎng)頁設計初探[J].蘇州市職業(yè)大學學報,2013,（2）.

[3][美]Tim Kadlec.響應式Web設計實踐[M].侯鴻儒,譯.北京:人民郵電出版社,2013.

[4][美]Ben Frain.響應式Web設計：HTML5和CSS3實戰(zhàn)[M].王永強,譯.北京:人民郵電出版社,2013.

[5][美]Stephen Hay.響應式Web設計全流程解析[M].余果,譯.北京:人民郵電出版社,2014.

[6][美]BenjaminLaGrone.響應式Web設計：HTML5和CSS3實踐指南[M].黃博文,饒勛榮,譯.北京:機械工業(yè)出版社,2014.

（責任編輯:魏樹峰）

中圖分類號：TP399

文獻標識碼：A

[文章編號]1671－802X(2016)02－0014－04

收稿日期：＊2016－02－23

作者簡介：吳多智(1982-)，男，海南海口人，軟件工程碩士，講師，研究方向：電子商務，計算機應用。E-mail:chenyiquan213@sina.com.

基金項目：瓊臺師范高等?？茖W校校級基金項目(qtky201501)

Realization and Analysis of Responsive Webpage Design

WU Duo-zhi,CHEN Yi-quan
(Qiongtai Teachers College,Haikou 571127,Hainan)

Abstract:The traditional websites lack sufficient compatibility with intelligent mobile devices.The concepts, design ideas and relevant techniques of responsive webpage design are presented.The process of responsive webpage design is illustrated with actual cases.The procedures and key techniques of responsive webpage design are analyzed and summarized,which offers reference for the development of responsive webpage.

Key words:responsive webpage design;webpage case;webpage design;webpage analysis