當終端設備分辨率達到每一個(gè)zui小寬度（也稱(chēng)為臨界值或斷點(diǎn)），就會(huì )觸發(fā)該寬度下預設的頁(yè)面布局進(jìn)行zui佳顯示，這就是響應式的工作原理。

怎么查看一個(gè)響應式網(wǎng)站的斷點(diǎn)？

用chrome瀏覽器打開(kāi)一個(gè)響應式網(wǎng)站，右擊“檢查元素”，找到“布局”里的“盒模型”顯示的就是視窗當前的分辨率，慢慢縮小視窗的寬度，頁(yè)面布局會(huì )隨著(zhù)尺寸的變化而變化，這就是網(wǎng)站的斷點(diǎn)。

響應式能夠做到響應的前提有兩點(diǎn)：

1.頁(yè)面布局具有規律性；

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

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

注意：執行頁(yè)面時(shí)，必須優(yōu)先考慮版式設計與創(chuàng )意，而不是被規范所固化，當完成頁(yè)面創(chuàng )意后，再進(jìn)行柵格系統的規范化調整。

頁(yè)面邊距就是內容區域以外的空間，響應式頁(yè)面邊距可以隨著(zhù)屏幕尺寸增大而增大。

列和槽

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

利用 Sketch 的布局設置功能，可快速搭建網(wǎng)格系統的參考布局，提高設計效率。（設置方法：菜單欄——視圖——畫(huà)布——布局設置）

以12柵格系統為例，一個(gè)12柵格系統根據業(yè)務(wù)需要，可被2等分、3等分、4等分、6等分、12等分，還可以被1：2：1、1：3：2、1:2、1:3、1:5等不對稱(chēng)分割。  

注：列的數量越多，頁(yè)面就越“碎”，比較難把控，適用于業(yè)務(wù)信息量大、信息分組多、單個(gè)盒子內信息體積較小的頁(yè)面設計；槽的寬度越大，頁(yè)面越輕松簡(jiǎn)單；

8點(diǎn)網(wǎng)格

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

為什么是8點(diǎn)網(wǎng)格呢？

目前主流設備的屏幕分辨率基本能被8整除，可確保不同布局之間的視覺(jué)一致性，同時(shí)可以適配多種尺寸。

當前主流屏幕分辨率，基本上都能被8整除

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

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

http://ezekroy.com/wangzhansheji/3279.html 設計稿響應式工作原理是怎樣的呢？