當終端裝置解析度達到每一個 zui 小寬度（也稱為臨界值或斷點），就會觸發該寬度下預設的頁面佈局進行 zui 佳顯示，這就是響應式的工作原理。

怎麼檢視一個響應式網站的斷點？

用 chrome 瀏覽器開啓一個響應式網站，右擊 “檢查元素”，找到 “佈局” 裏的 “盒模型” 顯示的就是視窗當前的解析度，慢慢縮小視窗的寬度，頁面佈局會隨着尺寸的變化而變化，這就是網站的斷點。

響應式能夠做到響應的前提有兩點：

1. 頁面佈局具有規律性；

2. 元素寬高可用百分比代替固定數值；

而這兩點正是柵格系統本身具有的典型特點，所以利用柵格系統進行響應式設計是順理成章的，響應式與柵格化自然也成為了 zui 佳搭檔。

 

注意：執行頁面時，必須優先考慮版式設計與創意，而不是被規範所固化，當完成頁面創意後，再進行柵格系統的規範化調整。

頁面邊距就是內容區域以外的空間，響應式頁面邊距可以隨着螢幕尺寸增大而增大。

列和槽

列是內容的容器，槽是調節相鄰兩個列的間距，把控頁面留白；列和槽加上頁面邊距就是螢幕的水平寬度。列和列間距的內容區域由 N 個列和（N-1）個槽組成。通常情況下，web 端採用 12 列，平板採用 8 列，移動端採用 4 列。

利用 Sketch 的佈局設定功能，可快速搭建網格系統的參考佈局，提高設計效率。（設定方法：選單欄——檢視——畫布——佈局設定）

以 12 柵格系統為例，一個 12 柵格系統根據業務需要，可被 2 等分、 3 等分、 4 等分、 6 等分、 12 等分，還可以被 1：2：1 、 1：3：2 、 1:2 、 1:3 、 1:5 等不對稱分割。  

注：列的數量越多，頁面就越 “碎”，比較難把控，適用於業務資訊量大、資訊分組多、單個盒子內資訊體積較小的頁面設計；槽的寬度越大，頁面越輕鬆簡單；

8 點網格

列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，目前 zui 普適易用的就是 8 點網格。設計頁面時，也應該遵循 8 點規律。值得注意的是，列跟槽的值儘量取 8 的倍數，但不是非得是 8 的倍數。但產品中各類元素應該遵循 8 倍原則（圖示、組件大小等）。 8 點網格系統有兩種柵格形式，設計師可根據具體情況進行選擇。將元素放到 8 的倍數柵格中，稱之為 “硬柵格” 。元素之間的距離是 8 的倍數，稱之為 “軟柵格” 。

為什麼是 8 點網格呢？

目前主流裝置的螢幕解析度基本能被 8 整除，可確保不同佈局之間的視覺一致性，同時可以適配多種尺寸。

當前主流螢幕解析度，基本上都能被 8 整除

以 8 為單位符合 “偶數原則” 。偶數原則在頁面縮放中 zui 大程度的避免了 0.5 、 0.75 、 1.25 等次畫素的出現，使頁面顯示效果更佳。

前端開源組件庫比如 Metronic 、 Antdesign 等也是基於 8 的原子單位來設計，設計師使用以 8 為基本單位的柵格系統的話，相互對接會更加方便，也能更高品質的還原設計。