編輯導語：柵格是是B端產品和設計師每天接觸最多的組件，對于B端設計師來說它并不陌生，但是該如何更好的了解它的結構和作用，如何更好地運用它，許多人并不清楚。本文就一些大眾的問題進行講解并回答，讓我們一起來看看吧！

大家好，我是子璐～

今天為大家分享的是柵格下篇「柵格在響應式設計中的運用」

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

寬度單位用百分比還是px，或者rem，他們之間的區別是什么？

響應式和自適應傻傻分不清楚，兩者有何區別和聯系？

什么是斷點？什么是媒體查詢？

一、響應式概述

1. 歷史長廊

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

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

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

2. 響應式和自適應的區別

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

1）自適應（Adaptive）

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

2）響應式（Responsive）

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

此時設計師看到這是不是會有疑問??，怎么判斷一個線上的網址是響應式還是自適應呢？

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

3. 如何選擇用自適應還是響應式

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

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

二、為什么用柵格系統來進行響應式設計

響應式可以響應的前提有兩點：

1. 頁面布局具有規律性
2. 擺脫像素，元素寬高用百分比代替固定數值，容器按比例實現

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

三、如何利用柵格進行響應式設計

1. 響應式適配方式

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

1）拉伸布局

布局不變，內容在屏幕顯示區域內進行相對拉伸，以達到布局完整。

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

2）等比縮放

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

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

3）擴展布局

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

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

4）固定布局

以像素px作為頁面的基本單位，內容不會隨著本身窗口寬度進行改變，窗口縮小后時內容會被遮擋

如人人都是產品經理網站?，整個網站采用的是固定布局，并沒有進行適配?？捎眯圆粡?，屏幕分辨率過小時內容會被遮擋

5）分欄布局

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

6）混合布局

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

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

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

2. 響應式策略

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

這里我們有個概念需要先了解一下：

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

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

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

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

3. 案例-工作臺適配

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

首先我們先來分析一下，內容區域根據寬度定義一般都兩種方式

1）內容區域定寬

內容區域定寬是指內容區域在每一組視窗寬度區間內，都會設定一個最大值（Max-with），當內容區域寬度小于最大值時，區域內元素會響應視窗的變化；達到最大值后，內容區域不再響應視窗的變化，而是寬度保持該最大寬度值不變，此時我們通過增加頁面兩側的margin值來響應視窗的變化。Flex Margin就是應對此情況的動態頁邊距

??2）內容區域寬度流式

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

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

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

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

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

四、Q&A

Q1: 有讀者比較疑惑我們設計稿基準尺寸是如何定的?

A1: 我們一般分兩大類情況來討論這個問題

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

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

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

Q2: 中后臺系統必須做成響應式的嗎？

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

Q3: 如何選擇斷點，為什么不是基于設備斷點

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

將斷點設置為與某些常見設備寬度相同，頁面展現的效果不佳的可能性極高。

那么完全不考慮設備嗎？

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

本文由 @且曼B端設計_劉美芳 原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。