基于響應式技術的電子商務網頁重制作

摘 要：為順應移動互聯網時代的購物需求，響應式網頁成為一種行業趨勢。通過媒體查詢、流式布局、彈性視覺媒體等響應式網頁設計技術，制作了基于響應式布局的電子商務網頁，實現網頁與三中不同分辨率設備匹配的視覺效果，為用戶提供了更加舒適的界面和更好的體驗。

關鍵詞：響應式頁面設計；CSS3；媒體查詢

響應式網頁設計（responsive web design，RWD），由伊桑·馬科特Ethan Marcotte[1]在2010年5月提出。響應式網頁就是能在電腦、平板電腦、智能手機等多種終端打開的自適應式網頁，這種網頁能夠針對不同平臺、尺寸和定向進行智能化調整頁面布局，為用戶提供了一個比傳統網頁更優化的視覺體驗。

傳統網頁在不同客戶端顯示的內容一致，用戶在尺寸較小的終端需要互動手指放大或縮小頁面，或調整屏幕顯示的方向是橫向還是豎向，非常麻煩。響應式頁面通過媒體查詢、流式布局、彈性視覺媒體三大核心技術[2]很好地解決了這一難題。

1 響應式網頁關鍵技術

1.1 媒體查詢

CSS3的媒體查詢（media query）是響應式設計的核心[3]，是CSS（層疊樣式表）技術的升級版本。

在Web頁面中head部分常看到這樣的一段代碼：

代碼中的\"media\"就是指特定的媒體類型，media的值可以是屏幕（screen）、打印（print）、支持所有媒體介質（all）等。

CSS3的媒體查詢還可以獲取設備的寬和高的值、設備的手持方向是橫向還是豎向、設備的分辨率、色彩深度等值。

1.2 流式布局

流式布局是一種多欄布局，可以一行顯示多個欄目，也可以換行顯示，隨著設備終端寬度不同而調整。有效避免了傳統網頁布局對于大小不同屏幕可能會出現大片留白或者擁擠錯位的問題。流式布局將頁面中欄目的寬度單位設置為相對值，使得頁面布局能夠靈活適應終端屏幕寬度。同時采用相對大小的字體單位，使得網頁文字大小可閱讀性加強。

1.3 彈性視覺媒體

響應式設計網頁另一個顯著優點就是圖片也隨著顯示終端尺寸大小而自動調整至合適尺寸。實現的方式是在CSS中添加如下代碼：

img { max-width：90%；}

2 基于響應式技術的電子商務網頁重制作過程

2.1 需求分析

某知名服裝品牌Naut為了順應移動互聯網時代的購物需求，需要對其原有主頁進行重制作，以實現響應式布局網頁功能。要求提供電腦端、平板端和手機端的三個主頁設計文檔。

2.2 響應式頁面布局設計

響應式設計網頁的頁面需要根據不同尺寸的終端視圖設計不同的布局，所以頁面布局的最小單位是div、文字內容、圖片和其它組成部分。針對三種分辨率下工作的設備：電腦（1440寬×900高）、平板（768寬×1024高）、智能手機（480寬×960高），分別設計了頁面布局，如圖1所示。

2.3 響應式頁面制作

根據前期頁面布局設計，網頁結構分為首部（header）、尾部（footer），中間（container）。其中container 又進一步分為左部（asideleft）和右部（asideright）。其中header和footer的寬度設置為和頁面寬度一致，左部寬度設置為占容器寬度的30%，右部設置為60%。

首先，設置網頁寬度等于終端設備的屏幕寬度，在標記中間，加入一個html5標簽，代碼如下：

代碼中viewport指網頁打開后的默認寬度和高度，device-width代表終端設備屏幕寬度。

接著，通過媒體查詢語句獲取媒體類型、設備手持方向等信息，代碼如下：

針對不同寬度的屏幕，設置不同寬度的頁面內容和布局，根據條件加載不同的CSS，部分代碼如下：

@media screen and （min-width：768px） and （max-width： 1440px） {

.asideleft {

width： 30%；

}

. asideright {

width： 70%；

}

}

@media screen and （max-width：480px） {

.asideleft， .asideright {

float： none；

width： 100%；

}/* 網頁左右部垂直排列，有時候會隱藏左部，對頁面進行重構 */

}

最后添加代碼實現彈性視覺媒體等功能。

2.4 運行測試

測試顯示重制作的網頁在三種終端設備上正確顯示，沒有內容頁面不合理縮放、平移、擁擠、空白和滾動條的情況出現。頁面從寬屏到窄屏來回切換屏幕尺寸的時候，布局的大小變化是平緩的。在手機端顯示的頁面，頁面元素垂直排列，實現了左側邊欄的隱藏。

3 結束語

基于響應式技術重制作的網頁，實現了閱讀、瀏覽的創新性，在“能展示的內容”和“最適和顯示器尺寸”之間取得了很好的平衡性，對于中小型電子商務企業有很好的借鑒價值。

參考文獻

[1]FRAIN B.響應式Web設計：HTML5和CSS3實戰[M].王永強，譯.北京：人民郵電出版社，2013：1-10.

[2]邢希，田興彥，王世運.響應式Web設計方法的研究[J].瓊州學院學報，2013，20（2）：36-38.

[3]張幸芝，徐東東，賈菲.基于響應式 Web 設計的教務系統移動平臺研究與建設[J].軟件，2013，34（6）：5-7.

[4]張樹明.基于響應式Web設計的網頁模板的設計與實現[J].計算機與現代化，2013（6）：125-127.

作者簡介：嚴卉（1982-），女，江蘇鹽城人，鹽城生物工程高等職業技術學校，助教，主要從事電子商務、網站建設研究。