響應式Web設計研究

劉花偉

【摘要】 本文主要講述響應式網站的優勢及實現步驟。

【關鍵字】 響應式網站（RWD，responsive Web Design） 彈性布局

隨著科技的飛速發展和智能手機及各種pad的普遍使用，原來針對電腦的單一的網頁設計越來越跟不上時代的需求，響應式網頁設計的需要越來越多。什么是響應式網頁設計（RWD，responsive Web Design）？用簡單的一句話概括就是：針對任意設備對網頁內容進行完美布局的一種顯示機制。下面針對公司做的幾個響應式布局的網站，詳細介紹一下響應式布局網站的優勢及實現的相關步驟。

響應式web設計的優勢主要有以下幾點：

1、開發，維護，運營成本低。

因為頁面只有一個，只是運用的css和js讓它適應不同的設計。特別是一些公司的官網，經常更新維護，用響應式web設計，維護起來就簡單的多。只需要修改一個頁面就可以在不同頁面終端顯示相同的效果。拿花旗銀行的官網來說，網站地址：https：//www.citibank.com.cn。假如客戶要修改花旗禮享卡的文字介紹或者選項卡的內容，我們只需要找到相關內容修改一次就好，大大節省了維護成本。原來公司的官網有3個版本：pc版，mobile版和ipad版。算上每種版本都有中英文兩個版本，網站的任何一次變動都需要修改6個地方，很不方便還容易出錯。

2、兼容性優勢。

現在科技日新月異，特別是移動端不時的就有新一代產品的出現。響應式布局在設計的時候已經充分考慮的這一點。不需要針對新出現機型做任何改變就可以完美的在新設備上顯示正確的內容。

3、對用戶友好，無需重定向。

原來針對每種機型做一套網站的做法，為了達到讓用戶無論通過什么設備都能訪問到正確的網站的目的，一般采用的方法是在網站的首頁進行設備判斷，然后根據結果跳轉到相應的網站URL，而有些檢測代碼就有可能在重定向的過程中丟失。響應式布局網站是一個URL，因此可以很好的解決這個問題。

下面著重講解一下響應式布局網站的實現步驟和注意事項。

1、設計。

要想做響應式布局網站，設計很重要。一定要設計部門配合好才能設計出好的相應式布局網站。首先，要確定整個網站的布局結構，方便在各種規格的屏幕上顯示；其次，確定網站中的圖片顯示方式，怎樣讓網站中的圖片在各種屏幕尺寸下正確顯示，并且不占用很多的下載流量顯得尤為重要；最后，就是確定哪些內容在小的屏幕上是開始隱藏起來的，通過下一步操作才能看到全部內容。

還是以花旗銀行的花旗禮享卡（鏈接：https：//www. citibank.com.cn/sim/ICARD/minisite/index_lix.html）為例。對比此頁在各種終端的顯示就可以看出，手機版和pc的最大的區別就是菜單導航變了，主導航變成左上角一個小按鈕，屏幕的第二行是當前頁面導航，同時也是二級菜單導航。這樣方便用戶進行下一步操作，也不占用很大的屏幕空間，從而可以騰出更多的空間顯示當前頁面的主要內容。其次，就是同樣在重要位置上突出申請信用卡的banner的重要內容。最后，選項卡的內容則僅顯示標題，如果用戶喜歡相關內容，就可以通過點擊查看更多內容。這樣既保證了內容的完整性，又保證了頁面的簡潔性，兩全其美。而ipad因為屏幕介于pc和mobile中間，因此內容顯示和pc差不多，只是菜單框架參考了mobile。所以說設計很重要，從一開始就要考慮好各種屏幕的適應性。

2、開發實現。

如果設計的時候充分考慮到相應式布局的問題，那實現階段就變得容易的多。首先，媒體查詢（media Queries）是響應式設計的核心；它能使我們根據設備的功能來設定相應的樣式。這樣就可以保證在不同的屏幕終端都能正確顯示所需要的內容。第二，彈性機制。這部分內容包括彈性的網格，彈性的容器，彈性的圖片和視頻等。在響應式布局的設計理念中所有的圖片和容器大小最好是以百分數來表示的，不能用固定的像素來設置。當然還要考慮下載流量的問題。在小的屏幕上不僅要同比縮小圖片，更要讓用戶下載小的像素的圖片或者像素低的圖片即響應式圖片。第三，字體。以前的普通網頁字體都是以px來作為度量單位的，這樣在手機端的文字就會變得非常小。CSS3引用了一個新的單位叫rem，他和em類很像，但比em更容易使用。因為em是針對父級元素來確定自身元素的大小，而rem卻是根據根元素來確定自身大小的。但是不要忘記一點就是在網頁的開始重置根元素的大小。

3、耐心的測試和修改。

因為要匹配所有的終端，因此在網站制作完畢后一定要耐心細致的測試，找幾個代表性的設備進行測試（當然不可能測試完所有的設備）。發現兼容性問題及時反饋處理，這樣就可以使得上線后的作品可以給用戶一個良好的體驗。

總之，開發響應式布局網站，雖然在一開始設計和制作的時候比單獨制作普通的網站花費更多的時間和精力，但是比起制作幾套網站來還是輕松得多。因此現在應用十分廣泛，隨著技術的更新現在也出現了很多支持響應式設計的框架，運用好可以大大加快開發速度 。