在此宽度下触发默认页面布局以zui佳显示为zui最佳宽度(又称临界值或断点)时，将触发zui佳显示页面布局。

使用chrome浏览器打开一个响应站点，右键单击“检查元素”，发现“布局”中的“盒子模型”显示当前窗口的分辨率，慢慢地缩小窗口的宽度，页面布局随大小而改变，这就是站点的断点。

1.网页布局有规律。

2.可以使用的元素宽高百分比替代固定数值。

而且这两点正是栅格系统自身所具有的典型特征，因此用栅格系统进行响应式设计是顺理成章的，响应式和栅格化自然也成为最的最佳组合。

注：在执行网页布局时，必须优先考虑布局设计和创意，当网页创意完成后，再对格子系统进行标准化调整。

页边距是指内容区域之外的空间，响应页边距会随着屏幕尺寸的增加而增加。

栏是内容的容器，槽是调整相邻两栏的间距，控制页留白；列和槽与页边距相加是屏幕的水平宽度。列距和列距的内容区域由N列和(N-1)个槽组成。一般来说，web端是12列，平板是8列，移动端是4列。

通过Sketch的布局设置功能，可以快速建立网格系统参考布局，提高了设计效率。(SettingDesign：菜单栏-Views-canvas-canvas-canvas-canvas-设置布局)

例如，一个12格子的网格网系统，根据业务的需要，可分为2等分、3等分、等分、6等分、12等分，也可以被非对称地分成1：2：1、1：3：2、1：2、1：3、1：5。

注意：栏数越多，页数越“破碎”，更难把握，适用于业务信息量大.信息分组多.单一框内信息体积较小的页面设计；页面设计槽的宽度越大，页面越简单；

列跟槽宽以网格为基本单元，因此首先要定义好栅格的原子单元，因此，对于一般zui来说，最简单的方法是8。网页设计也要遵守八条法则。需要注意的是，列跟槽的值尽量取8的倍数，但是不要超过8的倍数。但是产品中的各种元素都要遵守8倍的原则(图标，元件尺寸等)。八点格网有两种格子形式，设计者可以根据具体情况选择。把元素放入8的倍数栅格中，称为“硬栅格”。两元间的距离为8的倍数，称为“软栅格”。

当前主流设备的屏幕分辨率基本能达到8整除，能够保证各种版面在视觉上的一致性，同时还能适配多种尺寸。

目前主流的屏幕分辨率，基本可以被8整除。

符合“偶数原理”，以8为单位。在页面缩放中，偶数原则很大程度上避免了0.5、0.75、1.25等次像素的出现，使得页面显示更加出色。

像Metronic.Antdesign这样的前端开放源码组件库也是基于8的原子单元进行设计，设计者采用以8作为基本单元的栅格系统，这样的对接将更加方便，并且可以更好地还原设计。

美好未来首创1对1项目负责制，项目经理专人全程负责。我们为您提供网站建设优化解决方案，互联网品牌建设与网络营销，设计、技术开发、网站和SEO优化行业的技术和数据支持服务、营销推广等服务。为您的企业获取网络流量，挖掘精准客户，达到更高的销售指标。是您的企业提升产品销量最好的伙伴。