布局不變，內容在屏幕的相對位置進行等比例縮放，這種方式不會産生任何布局重構影響，適配簡單。

　　有個很簡單的方法：同一個頁面在不同尺寸的屏幕上訪問時，看網址是否一樣，只有一個網址爲響應式，有多個不同的網址爲自適應

　　系統是平台級面向全網用戶，或者雖然是公司內部使用，但是並不能統計到內部員工屏幕分辨率情況，就可以以1440*900作爲基准尺寸開始設計。

　　使用響應式：網站功能不多，用戶交互少，升級低頻或主要使用場景在桌面端，建議使用響應式。響應式成本較低，從運營的難易和維護的便利性考慮會更好，只要搞定網頁端，其他的也都搞定了。例如官網、B端後台

　　內容區域寬度流式 (fluid-width Container) 的後台系統，它的內容區域 (Container) 距離頁面兩側的頁邊距Margin是定值，因此視窗有多大內容區域就展示多大

　　自研系統給公司內部員工使用：由于公司批量采購設備的原因，公司內部員工的屏幕分辨率往往會比較統一，這種情況下我們需要拿到這個數據，然後以它作爲基准尺寸開始設計。因爲雖然響應式設計的目標是讓頁面在每個分辨率下都有最佳的體驗，但實際開發中畢竟存在損壞，設計還原很難100%，因而大多數情況下還是基于基准尺寸的設計與開發，在用戶端顯示效果最佳、體驗最好。

　　響應策略就是當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是Columns、Gutters、Margins以及由Columns跟Gutter組成的盒子（Box）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。

　　後隨技術發展，浏覽器增多，開發人員忙著兼容各種浏覽器。出現了流式布局和彈性布局，內容使用百分比（%）確定寬度。

　　以 Ant Design Pro 的頁面進行拆解，用浏覽器打開一個響應式網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。

　　結合各業務模塊的展示效果，將屏幕斷點可以劃分爲 320、576、768、992、1200，響應策略如下圖：

　　基于用戶體驗，技術人員至少需要開發三套界面，將差別較大的屏幕尺寸（如PC端、手機端、平板端），去創建多個不同的設計稿，每一個設計稿去對應一個用戶實際的尺寸範圍，根據預先設置的判斷標准範圍進行適配。像大多數的平台網站、商城網站都使用自適應技術進行開發。

　　在早期，硬件設備落後，開發人員開發網頁采用的主要是固定布局（也稱爲靜態布局），固定布局是將其內容設置爲固定的的像素寬度（px）

　　布局改變，充分利用不同設備、不同屏幕尺寸的差異化，通過分欄布局形式重新對內容展示做位置變化，進行整個屏幕更合理化的分配。此布局頁面結構産生變化，需要重構UI框架，有一定的開發成本。

　　A3:斷點的設置一定是基于頁面具體內容，並參考網站用戶的設備分辨率數據，設計過程中在一定區間內拉升或壓縮，已經無法用相同的布局內容時，必須改變內容展現方式時，而産生的關鍵尺寸的節點。

　　一般在帶有圖片顯示場景中使用，如站酷的布局采用的就是這種形式，需要注意圖片素材放大後清晰度的問題。

　　很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之爲斷點，後面內容會講到）保持統一邏輯。

　　人人都是産品經理（是以産品經理、運營爲核心的學習、交流、分享平台，集媒體、培訓、社群爲一體，全方位服務産品人和運營人，成立11年舉辦在線+期，線+場，産品經理大會、運營大會50+場，覆蓋北上廣深杭成都等20個城市，在行業有較高的影響力和知名度。平台聚集了衆多BAT美團京東滴滴360小米網易等知名互聯網公司産品總監和運營總監，他們在這裏與你一起成長。

　　確定了內容區域的響應方式後，我們再來考慮裏面模塊的響應規則，這裏可以參考Ant Design Pro 的響應方式，內容模塊采用拉伸+拓展+分欄結合的混合布局適配方式，如下圖所示

　　以Ant Design Pro的響應方式爲例，就采用了混合布局，分別運用了拉伸布局+擴展布局+分欄布局+固定布局

　　否則頁面實現太過複雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。

(责任编辑：admin)

　　如下圖微信公衆號後台的卡片適配采用的就是拉伸布局的形式，這種實現方式成本低，在響應式中大量的被運用。

　　自適應和響應式布局初學者經常會混淆，他們的原理確實是非常相似的，都是檢測設備。先來看下他們的區別：

　　如下圖花瓣的布局頁面所示，在網頁收縮過程中，經過一個斷點就會自動減少最邊緣元素，其他元素基本保持不變。柵格列數隨著浏覽器寬度的減少而減少，邊緣圖塊自動換行，或者有時會溢出滾動條。采用此方案需要做數據源的補足，保證內容展示合理。

　　定義響應式規則時，還需結合業務的屬性去制定。那在布局時，內容區模塊結構如何變化呢？簡單介紹幾種常見的變化形式：

　　使用自適應：需要兼顧用戶在桌面端、Pad端、移動端等多個設備間的操作習慣，或從頁面個性化多功能方面考慮，自適應設計更合適。因爲這樣可以更好的爲用戶提供功能全面，用戶體驗更好的界面。例如功能複雜、用戶交互頻繁的網站、電商類網站，用戶量較大的網站選擇自適應更合適。

　　2010年，CSS3正式上線，同時推出了響應式布局，2012年推出了媒體查詢（也叫斷點，這個概念後面再具體展開解釋）。媒體查詢可以移動內容，改變文字大小，隱藏或顯示內容塊，調整邊距和空白，以及調整其他的CSS樣式。因爲有了這兩個東西，上線以後，自適應布局和響應式布局就作爲更先進的布局用法而被迅速地使用。

　　A2:並不是必須的，是否要做響應式主要是根據後台産品面向的用戶來定的。如果是公司內部使用的系統，且員工配備的桌面設備都是有統一的分辨率，就可以不做響應式；如果是面向全網用戶的後台産品或公司內部的桌面設備並沒有統一的分辨率規格，那麽就需要做成響應式。當然，實際業務是否做響應式還有技術實現、時間、人員成本等各方面因素的考慮，技術側可以先不實現，爲了後期的拓展性，設計側需要先行考慮

　　不是的，設備仍然很重要，只是不應首先考慮它們。在一開始最好是不要只考慮頁面設計在特定設備上的顯示效果，而是應該從更通用的訪問設備，比如手機尺寸、平板電腦尺寸及桌面顯示器尺寸去考慮它。

　　如人人都是産品經理網站‍，整個網站采用的是固定布局，並沒有進行適配。可用性不強，屏幕分辨率過小時內容會被遮擋

　　案例是左右布局，內容區是中後台的圖表，考慮到全局還有表單、詳情頁、表格等負責頁面，內容區域柵格一直跟隨視窗變化，複雜布局下不至于太緊湊，用戶能看到的內容也更多。所以案例中我們采用內容區域的寬度流式。

　　而柵格系統頁面布局具有規律性、元素寬高可用百分比表示，這兩點正是柵格系統本身就具有的典型特點，我們透過柵格化布局的設計系統爲響應式適配打下良好的基礎。

　　響應式布局這個名詞相信大部分設計師都不陌生，也能清楚知道它的基本呈現效果。但具體操作及與開發人員協作時，許多專業名詞讓人難以理解，你是否也産生過如下疑問🤔️：

　　需要特殊說明的是，在該套響應策略中，頁面最小響應到576的頁面寬度，當視窗到達這個寬度時，浏覽器會限制視窗進一步縮小，因爲當頁面寬度比它還小時已經無法有效展示數據了，所以進一步的縮放是毫無意義的。

　　上篇中我們已經完成了基准尺寸1440*900px的設計，那下面筆者仍然以這個案例教大家如何進行適配。

　　你會發現它在 576、768、992 的尺寸中，頁面布局發生變化，然後根據屏幕斷點之間的頁面布局，采用向下兼容的適配方式,響應策略如下圖

　　爲了方便直觀的向開發工程師與團隊裏的其它小夥伴溝通，我們可以把這個響應策略制作成如下的表格，並在頁面中標注說明相關元素的變化規律，供自己與開發參考。

　　布局不變，內容可靈活按照屏幕比例進行增加或減少、擴展爲多行或多列等。首先需要通過最小單位選擇一個基本尺寸，然後以基本尺寸的倍數構建每個盒子框，就會出現一個個網格

　　技術人員只需開發一套界面，而不是爲每個終端做一個特定的版本，在代碼中嵌入一些布局的判斷，通過檢測不同分辨率，代碼自動進行處理，實現布局變化、尺寸縮放等，實現不同布局和內容適配。

　　斷點：每個視窗寬度的最小值是觸發響應的關鍵值，這個關鍵值即斷點。斷點是具有特定布局要求的預定屏幕尺寸的範圍，在給定的斷點範圍內，布局會根據屏幕大小和方向進行調整，超出範圍則相當于達到某個臨界點，界面布局會發生變化。

　　國內PC端屏幕分辨率排名前三的分是1920*1080、1366*768、1440*900；可以看出1920px 占比最多，但以它作爲基在面向小尺寸屏幕的時候多數都很不友好，而1440的尺寸實際上是處于中間位置，如果以它爲基准設計，最終向上向下響應適配後，相對誤差最小，從而達成用戶體驗的最大公約數。