現(xiàn)如今更多網(wǎng)頁采用響應(yīng)式設(shè)計方式，這樣能夠讓用戶在不同設(shè)備上都有更好的瀏覽體驗，今天小千就來給大家介紹一下響應(yīng)式網(wǎng)頁的那點事。

響應(yīng)式網(wǎng)頁設(shè)計的產(chǎn)生

      響應(yīng)式網(wǎng)頁設(shè)計，全稱是Responsive Web Design，最早是由伊桑·馬卡特（Ethan Marcotte）在2010年提出的一個概念，最主要的動機是“如何使得頁面布局適應(yīng)任何的瀏覽窗口”。響應(yīng)式頁面的設(shè)計理念是，頁面的設(shè)計與開發(fā)應(yīng)當(dāng)能夠根據(jù)用戶的行為以及設(shè)備環(huán)境（包括系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整，也就是頁面應(yīng)該有能力去自動響應(yīng)用戶的設(shè)備環(huán)境。簡而言之，這個概念指的就是網(wǎng)站的頁面能夠兼容多種不同的終端，根據(jù)不同的環(huán)境做出自動的響應(yīng)及調(diào)整。

      響應(yīng)式網(wǎng)頁開發(fā)的實現(xiàn)方案有很多，包括CSS媒體查詢的使用、彈性網(wǎng)格和布局、流式圖像等。無論用戶使用的是哪種設(shè)備，響應(yīng)式頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以實現(xiàn)自動的適應(yīng)。

      伊桑·馬卡特在其個人網(wǎng)站上給出了響應(yīng)式網(wǎng)頁的簡單示例。這個網(wǎng)站雖然簡單，卻具備了響應(yīng)式網(wǎng)頁的要素：自動適應(yīng)、流式網(wǎng)格布局、流式圖像顯示等等。讀者可以嘗試瀏覽這個網(wǎng)頁，通過手動拖動鼠標改變?yōu)g覽器窗口的大小，查看在不同瀏覽器窗口尺寸下頁面顯示的變化?？梢钥吹剑诓煌臑g覽器窗口尺寸下，網(wǎng)頁的地址沒有發(fā)生變化，但網(wǎng)頁的布局顯示卻可能有所改變，如圖所示。

響應(yīng)式和“自適應(yīng)網(wǎng)頁”

      提到響應(yīng)式網(wǎng)頁，不得不提的就是另一個“自適應(yīng)網(wǎng)頁”的概念了。初學(xué)者對于這兩個概念往往容易混淆。響應(yīng)式網(wǎng)頁具有自適應(yīng)的特性，是指頁面能自動響應(yīng)及適配用戶的設(shè)備環(huán)境，但平常所說的“自適應(yīng)網(wǎng)頁”是否就是響應(yīng)式網(wǎng)頁呢？

      答案是否定的。適配不同瀏覽環(huán)境的技術(shù)有很多，而傳統(tǒng)意義上的“自適應(yīng)網(wǎng)頁”雖然也可以針對不同的瀏覽環(huán)境做出自動調(diào)整，但其使用的并不一定是響應(yīng)式網(wǎng)頁的技術(shù)。比如早期的一些網(wǎng)站或現(xiàn)在一些門戶網(wǎng)站的首頁，可以根據(jù)檢測到的不同的客戶端而提供不同的瀏覽網(wǎng)頁，比如專門提供一個Android的版本，或者一個iPhone / iPad的版本等，這也是實現(xiàn)網(wǎng)站兼容不同終端的其中一種做法。我們往往可以看到一些“自適應(yīng)”網(wǎng)站的首頁，用PC端瀏覽時訪問的是類似“www.xxx.com”的地址，而使用移動設(shè)備訪問的是類似“m.xxx.com”的地址，可見打開的并非同一個網(wǎng)頁。事實上這種做法同時提供了多個不同的網(wǎng)頁，好處是可以極大地保證不同環(huán)境下的顯示效果，但是缺點也非常明顯，就是在網(wǎng)站維護時需要同時兼顧多個不同版本的網(wǎng)頁，而且維護的工作將會呈幾何級數(shù)上升。假如這個網(wǎng)站有多個入口，還會大大地增加架構(gòu)設(shè)計的復(fù)雜度。所以，這種使用不同頁面來適配瀏覽條件的方式，往往比較多見于網(wǎng)站的首頁，因為如果網(wǎng)站的所有內(nèi)容頁都采用這種方式，這個網(wǎng)站的結(jié)構(gòu)將會變得非常臃腫。而類似這種跳轉(zhuǎn)到不同地址、打開不同網(wǎng)頁的適配方式，并不能稱為真正的響應(yīng)式網(wǎng)頁，只能叫作“自適應(yīng)”的。

響應(yīng)式網(wǎng)頁的特點

      響應(yīng)式網(wǎng)頁的核心思想，在于“一次設(shè)計，普遍適用”，強調(diào)的是讓同一個地址的同一個網(wǎng)頁自動地去適應(yīng)不同的顯示環(huán)境，并且能夠根據(jù)屏幕的設(shè)置和布局需要，來自動調(diào)整網(wǎng)頁內(nèi)容的顯示。而響應(yīng)式的網(wǎng)站，不管使用什么設(shè)備，打開及顯示的都是同一個地址、同一個網(wǎng)頁，只是這個網(wǎng)頁可以通過自動地識別屏幕寬度，對不同的使用環(huán)境做出相應(yīng)的自動調(diào)整，從而造成網(wǎng)頁的布局和內(nèi)容展示在不同環(huán)境下時可能會有所不同。

      開發(fā)響應(yīng)式網(wǎng)頁時，首先我們需要改變一下以往的觀念，在開發(fā)時“以移動設(shè)備優(yōu)先”。為什么要選擇移動優(yōu)先呢？第一個原因就是現(xiàn)在移動設(shè)備的使用率越來越高，而且隨著移動互聯(lián)網(wǎng)技術(shù)的發(fā)展，移動端的應(yīng)用將成為重點。

      還有基于網(wǎng)站開發(fā)流程方面的考慮。打個比方，想象一下我們搬家的時候，如果我們要把所有的東西從一個大房子搬到一個小房子，那么很有可能空間會比以前擁擠，而且如果東西太多放不下，可能要不得不舍棄掉一些東西，這種“舍棄”有時會是一個很艱難的決定。但是如果反過來，從一個小房子搬到一個大房子，那么空間會寬松很多。同樣的道理，移動端稍微偏小的屏幕尺寸會使得空間比較受限，那么就要求我們在設(shè)計時考慮把最重要的內(nèi)容優(yōu)先加載和展示，這樣，即使后面遷移到較大的屏幕，也可以保證整體的結(jié)構(gòu)不會受到破壞，也許為了頁面的美觀可能需要增加一些內(nèi)容，但畢竟做加法會比做減法容易得多。而且由于大小、帶寬等限制，移動網(wǎng)頁的設(shè)計絕大部分應(yīng)該是內(nèi)容性的設(shè)計，移動優(yōu)先原則下提高用戶體驗的一大法寶，就是“把最重要的東西放在最顯眼的地方”。

      這里最后給大家總結(jié)出幾個響應(yīng)式網(wǎng)頁的幾個特點，未來大家可以重點深入學(xué)習(xí)這些特點在網(wǎng)頁中的實現(xiàn)。

（1）媒體查詢技術(shù)（Media Query）。響應(yīng)式網(wǎng)頁往往包含多個媒體查詢語句，用于適配不同的顯示條件。

（2）流式網(wǎng)格布局（Fluid Grid Layout）。讓網(wǎng)頁元素來決定網(wǎng)格的大小和設(shè)計，并根據(jù)網(wǎng)頁元素來決定所占用的網(wǎng)格位置尺寸。

（3）靈活的多媒體顯示（Flexible Media）。根據(jù)不同設(shè)備、不同分辨率、不同網(wǎng)速等環(huán)境，來自動適配多媒體內(nèi)容的顯示。比如可以讓同一個圖像，在iPhone 6上顯示“高清”的版本，而在iPhone 4上只顯示“一般”的版本。

（4）高性能的JavaScript腳本。由于有些用戶終端的運行條件有限，響應(yīng)式網(wǎng)頁里的腳本肯定要考慮運行效率的問題。現(xiàn)在已有一些較成熟的JavaScript框架，比如jQuery等，能大大改進腳本程序的運行性能和效率。