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

怎么查看一個響應(yīng)式網(wǎng)站的斷點？

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

響應(yīng)式能夠做到響應(yīng)的前提有兩點：

1.頁面布局具有規(guī)律性；

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

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

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

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

列和槽

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

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

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

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

8點網(wǎng)格

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

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

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

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

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

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

http://79806.xyz/wangzhansheji/3279.html 設(shè)計稿響應(yīng)式工作原理是怎樣的呢？