『』手把手教你做规范：布局规范( 二 )

本文插图

本文插图

举例：假设我们以1920px的屏幕为画板作图、使用24列栅格。设定栏的宽度为32px4（个原子单位），槽的宽度为16px（2个原子单位）。
则栅格宽度W=24列 x 32栏宽 + 23 列x 16槽宽=1136px ，其余宽度做自适应处理。
在1920屏宽下如下图所示：

本文插图

应用原则：

内容必须落在栏上，不能落在水槽中；
父元素需对齐栅格，子元素可再做栅格；
尽量按栅格做等分，平分成5等份也是可以的，前端工程师就需要改底层结构了。

二、为什么用栅格
1. 不用栅格设计行不行？行！
行，不用栅格没问题。很多优秀作品都没有刻意的遵守传统的栅格，反而显得更加灵动。但是打破规则前得知道规则才行。
2. 使设计更有规律和逻辑
基于栅格设计，按一定的规律把文字和图片排列在页面之中，使版面不光具有视觉感官的美感，也具有严谨的逻辑和一定韵律。
3. 利于团队协作
有了统一的栅格标准，就可以解释为什么“这个宽度要用120px ，那个宽度不能用140px……”之类的问题。设计团队之间沟通成本就大大降低，同时也能提高团队作业的一致性。
4. 响应式设计
现在人们使用的设备不在局限电脑或者手机，用户可能使用任何尺寸的设备来访问我们的设计。所以我们不能为单一的设备来设计，怎么动态的构建我们的设计、响应不同尺寸的设备，是设计师在起初就应该考虑的。
三、栅格系统如何响应的
1. 什么是响应式设计
通俗的讲就是：为了让设计在各种尺寸的设备上都保合理、持美观，用户无论用手机、平板、电脑使用我们的产品时都有良好都体验。检测到不同的屏幕尺寸的时候改变栅格的一些数值，变成我们预先设计的样式，这就是响应式设计。
2. 栅格是怎么响应的
（1）固定栅格
栏和槽的宽度是固定不变的，不随屏幕的大小而变化。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136 ，看到的如下图：

本文插图

在2560的屏幕下看页面，两侧的留白就会变大，中间的内容保持不变。如下图：

本文插图

在1024的屏幕下看页面，就会出现横向滚动条，页面仿佛被截断一样。如下图：

本文插图

在更小的屏幕下，栅格的列数会发生变化。但无论怎么变化，栏和槽的宽度是不变的。如下图：

本文插图

在临界值之间设计的布局不会改变。具体到什么临界值栅格的列数会发生变化，需要跟开发说清楚。临界值设置多少、设置多少个临界值要根据实际情况来制定。
优点：设计的还原度是最高的，无论在什么什么屏幕下，核心样式是保持不变的。
缺点：在小屏下会有滚动条。在大屏上左右留白过多，有点浪费空间。
（2）流动栅格
栏的宽度是变化的，随屏幕的大小而变化。槽的宽度固定不变。到一定的临界值的时候栅格列数会发生变化。
假设在我们以1920的屏幕大小为画板，栅格宽度是1136 。看到的如下图：