歷史長廊
在早期，硬件設(shè)備落后，網(wǎng)頁使用的是絕對靜態(tài)布局為主，絕對固定寬度的布局被稱為是靜態(tài)布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術(shù)發(fā)展。因瀏覽器的增多，開發(fā)者們忙于兼容各種瀏覽器。在這個期間，實際已經(jīng)有了針對各設(shè)備適配的解決方案，只是未成為主流，這種新布局方式叫自適應(yīng)布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應(yīng)布局。在這種新思想下，又出現(xiàn)了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應(yīng)式布局的概念，但此時出現(xiàn)了一個新的詞–漸進增強。漸進增強出現(xiàn)后，另一個詞優(yōu)雅降級也隨之出現(xiàn)了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應(yīng)布局，但有區(qū)別。
qqmail就是css hack的完美體現(xiàn)，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統(tǒng)一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發(fā)布了Android，移動互聯(lián)網(wǎng)爆發(fā)，html5標準發(fā)布。
互聯(lián)網(wǎng)大戰(zhàn)從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網(wǎng)站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結(jié)合自適應(yīng)的思想，出現(xiàn)了響應(yīng)式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述響應(yīng)式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應(yīng)該能夠自動切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備。
現(xiàn)如今，為何需要考慮多設(shè)備的兼顧呢，依然是因為時代發(fā)展與生活方式的變遷：
- 即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預(yù)知；
- 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設(shè)備正在不斷增加，“主流設(shè)備”的概念正在消失；
- 屏幕分辨率正飛速發(fā)展，同一張圖片在不同設(shè)備上看起來，大小可能天差地別。結(jié)合自身產(chǎn)品用戶訪問瀏覽器分辨率
- 鼠標、觸屏、筆、攝像頭手勢……不可預(yù)期的操控方式正在不斷出現(xiàn)。
因此我們需要在了解基本布局方式的特征下，選擇適合自身產(chǎn)品的布局實現(xiàn)方式。
布局方式對比
靜態(tài)式、自適應(yīng)、流體式、響應(yīng)式布局，A+R混合布局的特點對比如下：
靜態(tài)式布局：
窗口縮小后內(nèi)容被遮擋時，拖動滾動條顯示布局。不管在哪種設(shè)備，哪種瀏覽器上瀏覽都是一個樣。移動設(shè)備上則顯示太小或不全。
自適應(yīng)布局：
用自適應(yīng)技術(shù)(Adaptive)我們可以開發(fā)和提供不同的布局來為類似純觸屏或者混合觸屏設(shè)備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設(shè)備設(shè)計不同的樣式布局，相當于多個靜態(tài)布局組成的一個系列合集，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍，頁面通過百分比自動適配設(shè)備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現(xiàn)橫向滾動條，UI，圖片，文字會自動縮放，元素內(nèi)容、布局、交互方式基本不變。
彈性布局：
以百分比作為頁面的基本單位，可以適應(yīng)一定范圍內(nèi)所有尺寸的設(shè)備屏幕及瀏覽器寬度，并能完美利用有效空間展現(xiàn)最佳效果。
流體式布局：
屬于自適應(yīng)的一個子集，也是通過百分比自動適配設(shè)備屏幕分辨率和可視窗口大小，不同于百分比自適應(yīng)的是隨著窗口大小的改變，頁面的布局會發(fā)生小的變化，可以進行適配調(diào)整，這個正好與自適應(yīng)相補。
響應(yīng)式布局：
如果從廣義上講，響應(yīng)式布局實際上就是更好、更機智、更靈活的去實現(xiàn)自適應(yīng)，他們都算是一種彈性布局。再通俗點講響應(yīng)式重在于「響應(yīng)」它會隨著設(shè)備屬性（如寬高）的變化。
頁面的設(shè)計和開發(fā)應(yīng)當根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和刪格、布局、圖片、css media query的使用等。
狹義上講，響應(yīng)式網(wǎng)頁設(shè)計指的是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
A+R混合模型布局
- R和A上的區(qū)別
當響應(yīng)式設(shè)計在基于預(yù)定義斷點之上用CSS或者JS調(diào)整布局和內(nèi)容。調(diào)整方法提供基于用戶代理和設(shè)備類型的預(yù)結(jié)構(gòu)化模版。
他們之間主要的區(qū)別是DOM結(jié)構(gòu)，當采用響應(yīng)式思維開發(fā)時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節(jié)點），而在自適應(yīng)開發(fā)中我們可能會有不一樣的代碼結(jié)構(gòu)和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內(nèi)容。R一般來說需要在網(wǎng)頁設(shè)計初期就開始（通常采用mobile first策略），所以舊的網(wǎng)站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優(yōu)化，在斷點之間的自動過渡比較少。A采用保留現(xiàn)有桌面網(wǎng)站（desktop version）而對于更小的分辨率做針對性的優(yōu)化（適應(yīng)），減小重構(gòu)的成本。
兩種設(shè)計思維都是有效的，需衡量在項目中有多少組件、復(fù)雜性如何以及是否存在一種體驗是適合所有用戶的。開發(fā)web應(yīng)用時經(jīng)常會用到響應(yīng)式設(shè)計，例如通過自適應(yīng)開發(fā)來構(gòu)建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？
- A+R模型結(jié)合了基于單個主要臨界點的自適應(yīng)和響應(yīng)式方法。
混合式布局就是為不同終端設(shè)備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設(shè)備等等），在每個布局中，頁面元素隨著窗口調(diào)整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季帧⒆赃m應(yīng)布局的融合。
自適應(yīng)布局、彈性布局、混合布局都是響應(yīng)式布局方式的一種。其中自適應(yīng)布局的實現(xiàn)成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應(yīng)式布局實現(xiàn)方式。
很多時候，單一方式的布局響應(yīng)無法滿足理想效果，需要結(jié)合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內(nèi)（發(fā)生布局改變的臨界點稱之為斷點，后面內(nèi)容會講到）保持統(tǒng)一邏輯。
否則頁面實現(xiàn)太過復(fù)雜也會影響整體體驗和頁面性能。一般通欄、等分結(jié)構(gòu)的布局適合采用彈性布局方式，非等分的多欄結(jié)構(gòu)布局則需要采用混合布局的實現(xiàn)方式。
選型
如何考慮實踐過程中的判斷呢。一是看應(yīng)用場景，二是看如何設(shè)計“響應(yīng)式”方案。簡單、輕量的頁面直接用media query實現(xiàn)響應(yīng)性就很好。比如blog、小型企業(yè)站之類?，F(xiàn)在的CSS框架基本都具備響應(yīng)性。
但請注意響應(yīng)式不僅僅是響應(yīng)式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應(yīng)的靜態(tài)資源。這也算是響應(yīng)式。開發(fā)及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構(gòu)上也要調(diào)整，后端服務(wù)化，應(yīng)用層app化。
根據(jù)不同公司的技術(shù)特點，調(diào)整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應(yīng)式組件解決復(fù)用、功能同步的問題。總之，根據(jù)場景響應(yīng)式可以從各種層面，各種粒度上做。這是現(xiàn)代web開發(fā)的特點。
建議開發(fā)一套響應(yīng)式電腦網(wǎng)站（過渡到平板端，不過渡到手機端）和開發(fā)一套響應(yīng)式手機端網(wǎng)站（過渡到平板端以下的尺寸，不過渡到平板端）
響應(yīng)式布局有可能造成冗余的代碼較多，對研發(fā)的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應(yīng)各種布局。
大站還是要考慮數(shù)據(jù)計算和承載的問題，會對桌面和移動端輸出不同數(shù)據(jù)，減輕壓力。
實踐與技巧
首先，我們需要了解幾種分辨率的差別。
ps：原生應(yīng)用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統(tǒng)像素對應(yīng)多少物理像素。而設(shè)計角度通常需要參考的是所獲取的系統(tǒng)分辨率
以一個SaaS類后臺產(chǎn)品為例，對于基本流量來自Web端網(wǎng)頁的產(chǎn)品而言，需要了解當下的瀏覽器分辨率現(xiàn)狀 Web端不同屏幕分辨率占比情況，數(shù)據(jù)來源百度統(tǒng)計，如圖所示：
如上所述，選擇適配方式時，設(shè)計目標為：區(qū)分web與pad端可共享的設(shè)計布局大于手機端，且產(chǎn)品規(guī)劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術(shù)維護成本與開發(fā)成本的平衡，于是判斷需要選擇A+R模式來完成產(chǎn)品的跨端設(shè)計。
自適應(yīng)（A）方法能讓我們在不同的設(shè)備上有不同的體驗、內(nèi)容甚至是功能。如將960px作為主要的自適應(yīng)臨界點，根據(jù)全局統(tǒng)計信息定義，我們會得到一些相似處：
- 左側(cè)的可視區(qū)代表整個屏幕小于960px時的具體布局和內(nèi)容
- 右側(cè)的可視區(qū)代表整個屏幕大于等于960px時的另一種布局
在使用響應(yīng)式（R）技術(shù)時，我們可以利用主要臨界點創(chuàng)建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內(nèi)定義二級臨界點去調(diào)整布局。
通過結(jié)合自適應(yīng)和響應(yīng)的方法，我們得到A+R模型。利用自適應(yīng)技術(shù)，我們將致力于體驗和功能，作出兩種不同的情景設(shè)計。使用響應(yīng)式組件，我們可以處理上下文內(nèi)的UI組件和布局。
這種設(shè)計方法要求設(shè)計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結(jié)構(gòu)完全不同的小型移動設(shè)備上運行的大型APP。就像你看到的，你的產(chǎn)品將具有很強的靈活性，但同時也很復(fù)雜。
因為你要處理不同的代碼庫和環(huán)境（非強制性）,Twitter、Facebook和Github將此模式應(yīng)用在他們的移動網(wǎng)站上。如果你在移動設(shè)備上瀏覽這些網(wǎng)站，則可以根據(jù)移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
其他輔助手段
刪格
柵格系統(tǒng)可以幫助我們設(shè)計，但卻不能保證我們的設(shè)計。它有多種可能的用途，并且每個設(shè)計師都可以尋找適合其個人風格的解決方案。對于簡化復(fù)雜的響應(yīng)式布局規(guī)則而言，這是一項十分有效的輔助手段。
1. 列和槽（Columns and Gutters）
列（Column）用于對齊內(nèi)容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內(nèi)容。
2. 頁面邊距（Side Margins）
頁邊距是指內(nèi)容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
3. 用于組成柵格的列數(shù)稱為列結(jié)構(gòu)。
8、12、16和20是響應(yīng)式布局中最常見的幾種列結(jié)構(gòu)。而這取決于我們對產(chǎn)品的設(shè)計要求。12列結(jié)構(gòu)是相對靈活的。它可以進一步細分，將內(nèi)容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設(shè)計系統(tǒng)采用來24列的形式，如Ant-D
4. 斷點
是指屏幕尺寸的特定范圍，列結(jié)構(gòu)、列寬、槽寬和邊距都取決于斷點。在這個范圍內(nèi)，布局會根據(jù)可用的屏幕尺寸重新調(diào)整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內(nèi)容，則列將按比例縮小。如果一列的內(nèi)容無法在較小屏幕上顯示，該列將垂直放置圖文內(nèi)容。
5. 網(wǎng)格規(guī)則
列跟槽的寬度是以網(wǎng)格作為基本單位來做增減，所以應(yīng)該先定義好柵格的原子單位，“網(wǎng)紅款”8點網(wǎng)格指的是設(shè)計頁面時，也應(yīng)該遵循8點規(guī)律。值得注意的是，列跟槽的值盡量取8的倍數(shù)，但不是非得是8的倍數(shù)。
產(chǎn)品中各類元素應(yīng)該遵循這個倍數(shù)原則（圖標、組件大小等），不同的設(shè)計系統(tǒng)根據(jù)自身需求，設(shè)定這個規(guī)則。例如在Material Design中使用的是2X網(wǎng)格。
6. 流體柵格與混合刪格
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內(nèi)容寬度，根據(jù)屏幕大小變化在流體柵格中，列可以增長或收縮以適應(yīng)可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現(xiàn)代布局中，一些元素超出了網(wǎng)格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內(nèi)容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉(zhuǎn)變成一個適應(yīng)屏幕可用空間的流動?xùn)鸥?，以充分適應(yīng)內(nèi)容。
結(jié)語
設(shè)計需在技術(shù)方案前介入，根據(jù)你的產(chǎn)品特點，進行設(shè)計方案評估，可借助的手段有刪格，網(wǎng)格規(guī)則等，設(shè)計斷點規(guī)則時，需關(guān)注設(shè)備的常見系統(tǒng)分辨率。
移動和桌面設(shè)計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應(yīng)式設(shè)計來解決的。事實上，你可以認為如果一種設(shè)計不能兼顧兩種平臺的主要差別，就不能算是合格的響應(yīng)式設(shè)計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設(shè)計或者使用A+R的模型，在尋求合適的過程中，關(guān)注技術(shù)的革新。
A與B不是硬幣的正反面，它們?yōu)榱私鉀Q同一個問題而生，是同一種思想的延伸。
作者：神樂
配圖：沙拉
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》Web產(chǎn)品的適配設(shè)計選型
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司