響應式網站的設計與開發

張 超

（安康學院 電子與信息工程系，陜西安康，725000）

1 響應式WEB設計概述

1.1 響應式WEB設計理念

響應式Web設計的理念是所設計的網頁能夠響應設備環境，從而對頁面內容布局進行合理調整，最終向用戶提供友好的Web上網體驗。具體實踐響應式設計由多方面技術組成，包括彈性網格和布局、響應式圖片、CSS3中媒體查詢屬性等[1]。采用響應式Web設計的網站，就省去了需要為不同設備做專門版本的設計與開發工作。

1.2 響應式WEB設計的優點和劣勢

如果你網站采用的技術是響應式Web技術，你就不用再為網站在不同設備終端的顯示效果而擔心。響應式Web設計確保用戶一直擁有良好的體驗效果，這也是響應式設計的初衷。其次，網站運營維護的成本將會減小，且在不同設備間的兼容性強，操作靈活。

響應式網站的設計開發工作比較繁多復雜，且Web前端設計人員對美的感知能力也需要加強。再者，開發響應式網站需要從草圖開始重新設計網站結構。最后，由于響應式設計是一種復雜的新技術，在一些老舊的設備和瀏覽器中會出現，加載頁面速度過慢，或是存在完全不支持等問題。

1.3 響應式網站規劃設計中需要解決的問題

首先，HTML5的一部分特性與制作更好的響應式網頁直接相關，如簡潔的代碼。HTML5強調簡化標簽，僅鏈接那些我們必須的CSS、JavaScript和圖片文件。智能手機用戶只能使用有限的帶寬訪問我們的頁面，而響應式設計的一個主要目的就是，網站不僅要對用戶所使用設備的有限屏幕視口做出響應，還要以最快的速度加載網頁。雖然移除冗余的標簽元素只能節省一點字節，但積少成多直至最后節省出一片大空間。

其次，采用CSS3的不僅能讓頁面看起來酷炫異常，還可以讓響應式網站加載速度更快，加載所需資源更少，網站在以后更容易維護和修改。CSS3所蘊含的海量利好及精簡之道，可以讓我們將響應式設計從“一個普通的可響應式網站”提升為“一個面向未來的真正響應式網站”。

最后，Bootstrap是一種HTML、CSS和JS框架，是最受歡迎的用于開發響應式布局、開發移動設備優先的WEB項目。Bootstrap讓前端開發更快速、簡單。所有開發者都能快速上手、所有設備都可以適配、所有項目都適用。

2《心隨我悅》響應式網站的具體開發流程

2.1 網站的開發環境及工具

本網站使用Adobe Dreamweaver CS6軟件。本網站運行的服務器環境是在WIN7，32位操作系統下，安裝微軟公司提供的基于Microsoft Windows的互聯網基本服務即IIS服務器以及ACCESS數據庫，運用ASP動態語言，制作主題為“心隨跑悅”的響應式網站。

2.2 網站開發的關鍵技術

（1）媒體查詢。響應式設計的主要方法是使用CSS3媒體查詢屬性。媒體查詢包含了一個媒體類型和媒體屬性，其中媒體屬性如CSS3規范中描述的包含一個或多個表達式。媒體查詢的功能是為每種不同類型的用戶提供最佳的Web體驗。

CSS3媒體查詢屬性，已在Safari 3、Firefox 3.5和Opera 7瀏覽器中得到支持[3]。其測試的屬性包括：設備屏幕寬高，屏幕視口的寬高，設備屏幕分辨率等。這些屬性可以通過與或非等邏輯運算符，構成復雜的表達式。以此判斷目標的設備類型，從而加載相應樣式、調整頁面布局、提供適合的功能和交互。

（2）Bootstrap框架和Bootstrap的柵格布局系統。Bootstrap來自Twitter是目前最受歡迎的前端框架。它簡潔靈活，使得Web開發更加快捷。Bootstrap是基于HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，它包含了豐富的Web組件和自帶了13個jQuery插件。Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。它就是通過一系列的行（row）與列（column）的組合創建頁面布局，然后你的內容就可以放入到你創建好的布局當中。

2.3 網站欄目版塊的設計和部分關鍵代碼

響應式設計應該遵循移動優先的原則，但嚴格來說，項目從小屏幕入手過渡到大屏幕（移動優先），還是從大屏幕入手過渡到小屏幕（臺式桌面優先）區別不大。該網站采取的臺式桌面優先。網站以“心隨跑悅”為主題，圍繞著“跑步”這一話題分成了跑步指南、悅跑地帶、營養健身、跑友圖秀、聯系我們幾大板塊。以下以三個欄目的設計為例進行說明：

（1）首頁欄目設計。網站的首頁，乃至整個網站的設計風格是采用扁平化設計。扁平化設計的核心理念就是：去掉冗余的裝飾，讓“信息”本身作為核心被凸顯出來，且界面干凈美觀，操作簡潔。網站首頁的第一屏內容是運用jQuery代碼編寫的，實現圖片輪流顯示功能的特效。圖片淪陷切換代碼（部分）如下,頁面效果如圖1所示。

var x_sortResolutions = function(){

for(var i=0;i＜options.length-1;i++){

var i_max = i;

for(var j=i+1;j＜options.length;j++)

if(options[j].resolution＞options[i_max].resolution){

i_max = j;

}

if(i_max＞i){

var temp = options[i];

options[i]= options[i_max];

options[i_max]= temp;

}

}

}

如圖1 首頁第一屏內容

（2）跑步指南欄目設計。本欄目的網頁設計是采用左右傳統布局，使網站的結構格外清晰，主次內容一目了然。本頁面設計特色之處在于，采用Bootstrap的Tab標簽，可以制作出標簽頁切換的效果，為頁面增添人機交互動態效果，實現Tab標簽代碼結構如下，頁面效果如圖2所示。

＜div class="tabs"＞

＜ul class="nav nav-tabs" id="myTab"＞

＜li class="active"＞＜a href="#tab1"＞ 熱門活動＜/a＞＜/li＞

＜li＞＜a href="#tab2"＞ 跑鞋推薦 ＜/a＞＜/li＞

＜li＞＜a href="#tab3"＞ 裝備測評 ＜/a＞＜/li＞

＜/ul＞

＜div class="tab-content"＞

＜div class="tab-pane active" id="tab1"＞＜/div＞

＜div class="tab-pane" id="tab2"＞＜/div＞

＜div class="tab-pane" id="tab3"＞＜/div＞

＜/div＞

＜/div＞

如圖2 跑步指南頁面

（3）聯系我們欄目設計。“聯系我們”欄目用于收集用戶提出的寶貴意見，其頁面實現了前端頁面與后臺Access數據庫的鏈接，代碼如下:

＜%

dim Con

dim MM_conn_STRING

MM_conn_STRING="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("mydb.mdb")

set Con=server.CreateObject("ADODB.Connection")

Con.ConnectionString=MM_conn_STRING

Con.open

%＞

2.4 移動終端設備的兼容顯示測試

本網站的測試工具選擇的是最新版本的谷歌瀏覽器。在PC上使用Chrome谷歌瀏覽器模擬手機瀏覽器是一件非常簡單的事情，最新Chrome瀏覽器都提供了這項功能，可以模擬Anroid、iPhone、黑莓等等多款手機。

3 小結

響應式網站在未來的發展前途是光明的，是網站發展的大勢所趨。在這個日新月異的時代，尤其是對于互聯網行業來說，更新換代的速度很快，我們需要不斷了解新的理念和學習新的技術，這樣才能設計與制作出效果出眾、人機交互豐富且更具人性化的網站。

[1]許中博.“響應式”網頁布局設計淺析[J].黑龍江科技信息,2012(26):106-109.

[2]張樹明.基于響應式web設計網頁模板的設計與實現[J].計算機與現代化,2013,(6):125-127.