響應式Web設計（二）：響應式Web設計的概念

　　首先感謝你們對第一篇背景介紹一文的支持，今天將對響應式Web設計的概念進行一個大概的介紹，固然這一篇也不是什麼乾貨，只是做爲一個主題來講，概念的介紹必不可少，下一篇就應該有點乾貨了。

　　從背景介紹一文中，咱們能夠獲得這樣一個結論：互聯網正在快速迅猛地向移動終端發展，這樣對於網頁就有了一個Anywhere的需求。其實網頁的Anywhere就是響應式Web設計，說的再白一點，就是爲了省時省力省錢，一次開發出來的網頁，用一個URL，能夠在不一樣終端設備上有不一樣的呈現方式。下面四張圖就是一張網站所做的響應式設計。

      

　　

      OK！概念就是這樣的，本人一直以屌絲自居，因此這個定義也多少帶着點屌絲的意味，娛樂一下。。。呀，有點冷，不鬧了，下面咱們看看這種多種終端設備要求網頁不一樣呈現方式的需求下，都作過哪些嘗試呢？

• 網頁代碼的單純轉換：爲了讓用戶在手機這種移動設備上同樣能夠訪問咱們PC端網頁，咱們最初的響應式Web設計的嘗試就是開發同窗單純的把PC端網頁的源代碼直接轉換成WAP對應的代碼。
• 使用一些建站工具快速地搭建移動WAP網站。
• 針對不一樣的終端設備開發不一樣的版本，最多見的就是PC版本 + 移動版本，事實上我如今的工做很大程度上仍是停留在這個層次上，在給一家著名的電商網站定製開發其對應的移動版本。其實這種定製化開發從開發、設計、更新、維護各個過程來講，工做量仍是挺大的，可是誰讓咱目前的工做就幹這個呢，只要老闆給錢，就得好好幹。
• 經過PhoneGap框架將Web進行App化，可是APP化工做量巨大、用戶必須下載安裝、推廣渠道複雜繁瑣、SEO和他幾乎絕緣。

 　　由於我如今主要是從事移動終端設備的Web開發工做，事實上在我平常工做中設計到響應式Web設計主要是在各類移動終端中的響應式設計。因此我我的對於響應式Web設計的理念是：根據用戶行爲以及設備環境（系統平臺、屏幕尺寸、屏幕定向、屏幕分辨率等）對頁面內容和佈局進行相應的響應和調整。具體的實現方式有彈性網絡、佈局、圖片、CSS三、JS、HTML5等的使用。這樣不管用戶用android設備仍是ios設備，不管用戶用手機仍是pad平板，咱們都可以自動調整頁面來適用用戶不一樣的設備。

　　從背景介紹一文中，不難看出，如今移動互聯網發展的浪潮愈來愈猛，因此我的建議，在作響應式Web設計的時候採用逐步加強的模式進行開發，先讓你的移動網站支持手機豎屏→支持用戶橫屏行爲→支持各類屏幕大小的手機→支持不一樣系統版本的手機（主要是android設備和ios設備）→支持pad平板→……同時針對移動網站設計和開發的一些規則和建議的總結，在我另一篇文章《初探移動網站的架構和設計》中作了介紹，這裏再也不贅述。

 　　響應式Web設計的概念就介紹到這裏吧，最後總結一句：響應式Web設計並非單純地根據用戶行爲和設備環境進行簡單的網頁內容的調整和呈現方式的不一樣，它實際上是一種全新的Web設計方式，而這種全新的設計方式的最終用途到底是什麼呢？其實就是一個字：爽，讓用戶用的爽纔是王道！