当终端装置解析度达到每一个 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 为基本单位的栅格系统的话，相互对接会更加方便，也能更高品质的还原设计。