支持移動終端的響應式Web設計與研究

摘要：隨著智能手機為代表移動終端設備的普及和發(fā)展，提高基于不同設備的交互體驗成了交互系統(tǒng)是否被認可的關鍵。本文通過采用基于響應式Web的自適應系統(tǒng)設計，通過在系統(tǒng)的表示層甑別不同設備類型，針對性提供界面需求，提高了用戶體驗。

關鍵詞：響應式Web；交互；移動終端

2012年被稱為智能手機年，根據(jù)最近一份調查顯示，在美國的智能手機覆蓋率已達50%，也正因為此當前確實是提升移動終端用戶體驗的大好時機。移動互聯(lián)體系中，Web交互系統(tǒng)是作為人與人、人與設備之間溝通的橋梁存在，隨著當前移動智能設備的普及，原有的交互系統(tǒng)面臨挑戰(zhàn)。根據(jù)有關機構的統(tǒng)訊預計到2015年，移動互聯(lián)網(wǎng)的用戶數(shù)量將會超過桌面用戶。除了智能手機之外，使用平板電腦甚至是電視機進行上網(wǎng)的用戶也在持續(xù)增加。在這種形勢下，怎樣讓我們的網(wǎng)站盡量兼容各種類型的設備，并確保優(yōu)良的用戶體驗，這將是越來越重要的問題。本文嘗試通過響應式的設計開發(fā)方式，構建一個使系統(tǒng)的頁面隨接入設備的不同而自行響應，動態(tài)的調整布局結構、元素規(guī)格樣式，將相同的內容以不同的格式呈現(xiàn)給不同設備的用戶的系統(tǒng)。通過設計這樣的交互系統(tǒng)，我們就可以達到利用同一套代碼，使網(wǎng)站內容在Pc、平板電腦以及智能手機瀏覽器上都能正常的顯示的目的。

1、基于響應式Web系統(tǒng)的設計流程

基于響應式Web的交互系統(tǒng)的設計基本流程為以下三步：第一，確定需要兼容的設備類型、屏幕尺寸等硬件信息，以及交互的信息流需求信息等；第二，根據(jù)第一步的硬件需求尺寸制作線框模型，根據(jù)交互信息需求設計功能模塊；第三，進行uI效果設計，進行交互功能的定義及詳細設計；最后，通過前端程序設計實現(xiàn)。

2、響應式Web的基本原理

基于響應式Web設計（Responsive Web design）的理念是，頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS mediaquery的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環(huán)境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發(fā)了。簡而言之，我們的Web設計應該做到根據(jù)不同設備環(huán)境自動響應及調整，不過，我們無法像其它工程領域一樣使用類似于運動傳感器或是機器人技術去感知用戶，響應式Web設計更多需要的是抽象思維。目前，液態(tài)布局、幫助頁面重新格式化的media queries和腳本等技術已經開始應用，但是響應式Web設計不僅僅是關于屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對于設計的全新思維模式。

3、響應式Web實現(xiàn)的關鍵

構建響應式Web的有些關鍵技術與關鍵環(huán)節(jié)，其中應用最關鍵的技術有：HTML5技術、CSS3 Media Query技術，最重要的環(huán)節(jié)部分為流體布局（fluid grid）、流體圖片（1iquid image）、以及媒體查詢（media query）。

3.1 HTML5與CSS3技術介紹

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0標準的HTML標準版本，現(xiàn)在仍處于發(fā)展階段，但大部分瀏覽器已經支持某些HTML5技術。HTML5有兩大特點：首先，強化了Web網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等Web應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡應用服務（plug-in-based rich internetapplication，RIA），如Adobe Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強網(wǎng)絡應用的標準集。

CSS即層疊樣式表（Cascading Stylesheet）。在網(wǎng)頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個模塊實在是太龐大而且比較復雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。

3.2 流體布局（fluid grid）

流體布局其實就是在我們實現(xiàn)PC終端的頁面基礎上，將一些元素的寬高由原來的固定多少像素（px）調整為百分比（%）或字體比例（em）（或布局方面的margin、padding、left、top等以px為單位的值），這也是當前實現(xiàn)響應式布局的兩種主要實現(xiàn)方法。第一種用百分比（%），就是以該元素的父容器的寬高為100%，其他元素的寬高相對于其父容器的比例，只要將具體的像素值相對于他的父容器的一個百分比折算即可。當然這種方法的換算有點復雜，因為很多相對的寬高折算的百分比系數(shù)是帶小數(shù)的，所以這時候可能要你有足夠的耐心才能實現(xiàn)。下例為一個實現(xiàn)例子代碼：

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

.figure，

ii#f-mycroft{

margin-right：3.317535545023696682%；/*21px/633px*/

width：48.341232227488151658%；/*306px/633px*/}

上面代碼中通過百分比定義容器的長寬高，其實還可以采用另外一種使用字號比例（em）去實現(xiàn)控制的流體布局方法，其實方法是跟上面一樣的，只不過我們將%換成Yem，這種方法就是某元素具體的寬高（px）在當前基準字號（font-size）下折算出多少個em。一個在480分辨率下寬高為64px*64px的元素，其父容器的字號（font-size）為20px，那么它折算成em為單位就是3.2em*3.2em。當其父容器字號基準根據(jù)不同的分辨率變化的時候，該元素寬高也能根據(jù)這個字號基準成比例的縮放，就能實現(xiàn)響應式變化。

3.3 流體圖片（Iiquid image）

在目前所了解的很多資料和實際應用中，在圖片處理上，如果要使圖片能根據(jù)分辨率來適應，而且還不失真，是比較困難的。但其實設計中我們其實不用考慮的那么復雜，我們要做的只是讓圖片能根據(jù)不同分辨率自適應罷了，我們不管圖片會不會因為被拉伸而失真，因為真的遇到這樣的情況，我們可以考慮在不同分辨率下使用不同的圖片，這樣就簡單多了。所以讓圖片尺寸自適應，我們只要不給圖片設定具體的寬高尺寸，只要在樣式中給該圖片一個width：100%，這樣圖片就能根據(jù)它父容器的尺寸自動調整了。

3.4 媒體查詢（media query）

響應式頁面的一個關鍵是實現(xiàn)媒體查詢，即能夠根據(jù)不同的分辨率去調整一些不同的樣式。通過這樣的媒體查詢結構，我們可以設定在不同分辨率下選用不同的樣式來調整響應式頁面。像前面第二點流體布局上，我們使用百分比或字號比例去實現(xiàn)流體布局的時候，第一種方法是可以不用媒體查詢直接實現(xiàn)流體布局的，就是元素的寬高能自適應不同分辨率屏幕。但第二種方法用字號比例（em）去實現(xiàn)流體布局的時候，我們就必須要結合媒體查詢了，因為我們的字號比例是根據(jù)基準字號來實現(xiàn)的，就是說在基準字號一定的情況下，該元素的大小就是固定的，而我們要實現(xiàn)該元素尺寸自適應，就只能通過調整基準字號來實現(xiàn)了。

通過媒體查詢，我們可以讓在基準字號font-size在不同分辨率下不一樣，這樣其子元素相對于該字號的比例em算出來的像素px就不一樣了，這樣就能實現(xiàn)響應式了。所以我們兼容不同的分辨率的時候，可以先在某個分辨率下，實現(xiàn)完美的重構，然后將所有元素具體的尺寸（px）折算為em（根據(jù)父容器的font-size），然后再通過媒體查詢，調整不同分辨率下的基準字號font-size就能實現(xiàn)具體的響應式了。在具體的項目過程中，采用媒體查詢主要是調整不同分辨率下的基準字號的大小，具體如下面的代碼所示：

body，section，button，hl，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：20px；}

/*for 800 px width screen*/

@media only screen and （max-device-width：800px），only screen and（max-width：800px）{

body，section，button，h1，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：33.34px：}

}

/*for 720 px width screen*/

@media only screen and （max-device-width：720px），only screen and（max-width：720px）{

body，section，button，hl，p，.1ayer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：30px；}

}

通過媒體查詢的功能是根據(jù)不同的分辨率適配不同的樣式，我們可以通過上面的做法是實現(xiàn)流體布局，還可以通過媒體查詢來細調具體的頁面在不同分辨率下的不同表現(xiàn)形式。

4、結束語

相對于傳統(tǒng)的Web應用實現(xiàn)方式，響應式Web實現(xiàn)有以下幾個優(yōu)點：

4.1 對用戶友好

很顯然，響應式Web設計可以向用戶提供友好的Web界面，因為它可以適應幾乎所有設備的屏幕。現(xiàn)在技術發(fā)展日新月異，每天都會有新款智能手機推出。如果你擁有響應式Web設計，用戶可以與網(wǎng)站—直保持聯(lián)系，而這正是開發(fā)響應式網(wǎng)站的目的所在。在響應式網(wǎng)站的幫助下，你的應用可以很好支持移動智能終端用戶，你需要做的只是創(chuàng)建一個移動應用。

4.2 積累分享

響應式Web設計可以讓你（作為網(wǎng)站的擁有者）通過單一的URL地址收集所有的社交分享鏈接。你可以為創(chuàng)建更好、更友好的網(wǎng)站而做出積極貢獻。

4.3 無重定向和更少維護

響應式Web設計最大的優(yōu)點之一是，你不必在乎任何重定向，它包含無用戶代理定向。所以當你很少負責解決重定向及定向用戶時，這是一件很棒的事情。開發(fā)一個獨立的移動網(wǎng)站，會增加你的工作負擔。實際上你就擁有了兩個獨立網(wǎng)站。如果你有一個響應式網(wǎng)站，維護的成本將會很小，因為它只有一個布局，且可工作在所有類型的設備上，而這可以明顯地減少你的工作量。

當然基于響應式Web應用還存在一些諸如加載時間稍慢的問題，它并非適合所有類型的網(wǎng)站，本文也中的實現(xiàn)也具有一定的局限性，需要以后不斷結合新技術進行改進。