劉花偉

【摘要】 本文主要講述響應(yīng)式網(wǎng)站的優(yōu)勢及實現(xiàn)步驟。

【關(guān)鍵字】 響應(yīng)式網(wǎng)站（RWD，responsive Web Design） 彈性布局

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

響應(yīng)式web設(shè)計的優(yōu)勢主要有以下幾點：

1、開發(fā)，維護，運營成本低。

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

2、兼容性優(yōu)勢。

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

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

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

下面著重講解一下響應(yīng)式布局網(wǎng)站的實現(xiàn)步驟和注意事項。

1、設(shè)計。

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

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

2、開發(fā)實現(xiàn)。

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

3、耐心的測試和修改。

因為要匹配所有的終端，因此在網(wǎng)站制作完畢后一定要耐心細致的測試，找?guī)讉€代表性的設(shè)備進行測試（當(dāng)然不可能測試完所有的設(shè)備）。發(fā)現(xiàn)兼容性問題及時反饋處理，這樣就可以使得上線后的作品可以給用戶一個良好的體驗。

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