前言

栅格、响应式这两个名词相信大部分设计师都不陌生，也能清楚知道它的基本呈现效果。但具体操作及与开发人员协作时，许多晦涩难懂的专业名词让人难以理解，你是否也产生过如下疑问🤔️

1. 宽度单位用百分比还是px，或者rem，他们之间的区别是什么？

2. 响应式和自适应傻傻分不清楚，两者有何区别和联系？

3. 什么是断点？什么是媒体查询？

一、栅格简述

1.1 栅格的由来

栅格最早来源于平面设计中的网格系统，英文Gird Systems。在 1692 年时，法国国王路易十四因为国家印刷水平差强人意，命人成立了一个管理印刷的皇家特别委员会。他们以罗马体为基础，采用方格为设计依据，每个字体方格分为 64 个基本方格，每个方格再分为 36 个小格，一个印刷版面就有 2304 个小格组成。

再后来，逐渐演变成运用固定的格子设计版面的平面设计风格，平面设计中称之为网格，这就是栅格的雏形。互联网发展之后，界面设计将这一概念借用过来，简易的理解栅格就是一种有规则的参考线。

1.2 UI中的栅格

网格与栅格的本质其实是相同的，都以英文单词“Grid”来表示，平面设计中称为“网格”，而在网页端或移动端中称为“栅格”。其区别在于：

网格尺寸是固定的：平面设计一般用到的纸张规格（尺寸），不管是英国、美国、日本或ISO采用的德国DIN纸张规格全部都是固定的尺寸，宽度和高度都是固定的，也就是绝对的。

栅格尺寸是变化的：而网页或App的设备尺寸不是固定的，其横向宽度受限于设备宽度，由设备屏幕宽度来决定，而纵向高度则是随着内容的多少来决定的。考虑到真实设计场景下，可能会使用无限下拉交互方式承载复杂内容的规则，所以往往只需要制定纵向列式分割规则，以规范 X 轴向内容的对齐、比例等布局效果。

1.3 栅格的价值

对用户：提高内容布局规律性，减少认知成本

设计更有秩序和节奏感，页面信息的展现更加清晰，从而提高用户的阅读和浏览效率，提供更好的用户体验。

对设计师：提高效率与规范化

帮助设计师快速校准元素在界面内的位置，节省了基础操作上的时间，如移动元素、计算间距等。同时也避免了间距凭设计师感觉造成不统一的现象

对开发：提高设计还原度，节约时间成本

栅格系统提高了网页的规范性。一方面可以帮助开发同学规避常规的横向间距类问题（纵向间距问题主要受字体的设置影响），以提高设计还原度，另一方面有利于开发人员对组件和模块的复用，进一步提升效率。

响应式布局

栅格能够指导页面在多平台多屏幕尺寸下的响适应设计，便于与开发对接，阐明流动布局或端点布局等适配方案，保证还原度的同时降低沟通成本

二、栅格的构成

栅格系统主要由列、水槽、边距三个基本元素构成

• 列Column：也被称为栏，用来盛放文本、表格、图片等内容及元素。列的宽度称为列宽，常用百分比来定义，而不是固定值（使用固定删格的时候会采用固定值，会在下篇响应式栅格中讲到），前端同学通过百分比可以灵活适应屏幕大小
  
  
• 水槽 Gutter：也被称为沟/间距，水槽是相邻两个列宽之间的间隔，用来分割内容，水槽的值越大，页面中留白部分的面积越多，视觉效果越松散；反之，页面越紧凑。水槽通常设为固定值
  
  
  
  
  
  
  
  
• 边距 Margin：网页内容和屏幕边缘之间的间隔，通常为固定值。左右大边距是计算在栅格的总宽之内的，边距值的大小决定了每个屏幕尺寸的最小呼吸空间，一般边距值≥水槽值。

此外还有最小单位、总宽度、列数三个计算因子

• 最小单位：栅格的基础单位，栅格内容元素和布局规则（如水槽、边距的值）都是基于它的整数倍递增的。如最小单位是8px，水槽的宽度可设为8n
  
  
• 列数：列的数量即栅格数量，如12栅格就有12列、24栅格就有24个列。列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感
  
  
• 总宽度：页面中自适应内容部分容器宽度，而非屏幕宽度，总宽度=列宽*列数n+水槽*（n-1）+边距*2

三、案例-搭建栅格

以下图「数据总览」页面为例，设计稿尺寸为1440*900px，左侧导航栏常驻，该页面是没有用栅格搭建的。乍一看问题似乎不大，但是资深的设计师很容易就能看出实则切割混乱，无规律。另还有一致命的点在于填充内容的容器无法换算成百分比，前端同学无法做自适应，想要适配是很困难的。

那下面将以此页面为案例教大家如何一步步搭建栅格：

Step 1: 确认容器范围

设计师在规划产品用户界面时，首先需要考虑页面的整体布局，以便确认布局栅格的容器。栅格容器不一定是整个屏幕或界面，需要根据真实场景判断，一般只需要在内容层进行栅格化，约束内容自适应比例。

1) 单页基础布局：栅格容器=屏幕宽度

2) 存在固定控件布局：栅格容器<屏幕宽度

存在常驻的控件，如侧边导航栏一般属于固定占位的控件，不会跟随屏幕尺寸或内容量的变化而变化，属于全局控制层，其占据的界面区域也不需要用来布局其他功能及内容，所以其不属于栅格区域。有赞的帮助中心同理

案例属于侧边导航布局，所以案例容器范围=屏幕宽度-侧边导航=1440-侧边导航

Step 2:确定列数、水槽值、边距

1）确定栅格列数

目前有两种比较主流的等分方式：12等分与24等分。

12等分的栅格系统：在流行的前端开发开源工具库Bootstrap与Foundation中广泛使用，适用于业务信息分组较少，单个盒子内信息体积较大的中后台页面设计；12栅格的优势在于其在相对较小的数字中最容易被整除，保证了设计师切分区块的灵活性，同时又不至于使页面过于琐碎

24等分的栅格系统：适用于业务信息量大、信息分组较多、单个盒子内信息体积较小的中后台页面设计；相对12栅格系统，24栅格系统变化更加灵活，更适合内容比较多样复杂的场景。我们常见的中后台设计发布于 PC 平台，且功能复杂，内容繁多，且考虑到后期的扩展性，因此中后台常用灵活性更高的 24 栅格，比如ant design和zan design，栅格系统大小=24列+23列间距+2大边距

所以，案例中我们将采用24栅格系统

2）确立栅格的最小单位

由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位「网格」的大小。中后台中目前最普适易用的就是 8 点网格，我们可以建立 8点为一个单位的网格，使用 8 的倍数来定义模块的间距与元素的尺寸。

在适用性方面，4、6、8、10 这四个数值都是基本可以满足的，在灵活性方面，4pt表现最佳，那为什么不选4而是8呢？8 点网格有如下几点优势：

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被 8 整除，使用 8 作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计

灵活性方面，4pt最佳，8pt次之。但是使用4pt页面就会被分割的非常细碎，在设计时比较难于把控，它比较适合页面内容信息较多，布局排版比较复杂的产品。而8pt栅格一般的设计场景都可以很好的满足，比较适合大多数的项目，因此是比较推荐使用的

开发工程师使用的前端开源组件库比如 Metronic、Antdesign 等也是基于 8 的原子单位来设计，因此如果设计师也使用以 8 为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质地去还原我们的设计。

3）确定水槽宽度和页边距

按照亲密性原则，我们可以按照8n定义几个常用的间距值。人眼对于距离的认知不是均匀、等分的，而是渐变的，通过对比几种经典的数列模型，选择基于斐波那契数列生成一组数组作为间距值，得到8、16、24、40系列数值，为了区分它们的使用场景我们依次为其命名为XS、SM、MD、LG、XL。

经过实践经验，在中后台系统下，水槽宽度为16px时，页边距为24px时视觉效果最佳。

水槽=16px：此时列间距在保证页面空间被高效利用的同时，也可以维持良好的呼吸感，不至于让内容过于紧凑。

页边距=24px：需要通过距离区分模块与模块之间的信息，同时也让内容区更加紧凑

Step 3:利用栅格公式计算栅格体系

栅格计算公式如下：内容区宽度=24栏+23水槽+2页边距=屏幕宽度-左侧导航宽度

基于前文屏幕宽度为1440px，采用24栅格布局，页边距取24px，水槽取16px的前提下。通过对栅格公式的计算，将具体的值带入公式：

1440-左侧导航宽度=24栏+23*16+2*24

Step 4:组织内容，分配页面比例

建立好栅格系统后，就可以根据自己的实际业务，在栅格系统上组织内容分配页面比例了。我们把页面上最终承载内容称为“盒子（Box）”,这个盒子的宽度则由栏目与水槽按比例组合得到，高度则由内容多少决定。

拓展小知识：盒子的概念

在栅格系统上容纳业务内容的容器我们把它称之为盒子（Box），栅格系统上的盒子其实跟前端工程师写页面时用到的盒子是一致的。如图所示，当我们浏览任何一个网页时，右键>检查元素（审查元素），然后在style菜单下就可以看到这个盒子结构了。

Padding就是主体内容距离盒子外侧的距离，（主体内容可以是一个按钮、一段文本、一张图片或者一个表格等）；Margin就是相邻两个盒子的距离，对应在后台栅格系统就是水槽的大小

了解完栅格系统的盒子模型之后，下一步我们需要根据具体业务内容来确定盒子的宽度。以24栅格系统为例，一个24栅格系统可以根据业务需要被2等分、3等分、4等分、6等分、8等分、12等分，还可以被1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5等不对称分割。

上图中只列举了部分比例，同一个页面上控制在5组以内的比例值组合来布局比较合适，组合形式过多页面就会显得琐碎、杂乱，不利于阅读和使用。因为盒子的高度根据内容来定，故图中没有体现高度这一维度的变化规律

根据具体业务内容最终得出下图中的盒子的具体比例

最终效果如下：

到此，我们的栅格系统就搭建完成了，但是这就结束了？🤔️🤔️

No、No、No...当然要物尽其用，前文中我们定义栅格原子单位为8，这意味页面上各元素间距的变化也应遵循8n的规律，当然也就包括每个盒子卡片里的内容。一致的变化规律让页面富有节奏感跟韵律感，在提高页面一致性的同时也减少了设计决策成本。

拓展步骤:元素对齐与间距设定

栅格系统中水槽与边距的变化也遵循8n的变化规律，此处n为大于0的正整数，即n=1、2、3...，用于规范元素间距的8n，n最好是取这样的整数。但是也可以根据业务情况取0.5、1.5这类包含二分之一8的情况，原因是实际工作中，我们面临的情况是复杂的，这样处理可以让间距的设定适应一些特殊的场景，从而使其更灵活普适。

栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局，然后再填充内容、调整细节。

四、响应式概况

4.1 历史长廊

• 在早期，硬件设备落后，开发人员开发网页采用的主要是 固定布局（也称为静态布局），固定布局是将其内容设置为固定的的像素宽度（px）

• 后随技术发展，浏览器增多，开发人员忙着兼容各种浏览器。出现了流式布局和弹性布局，流式布局内容使用百分比（%）确定宽度。
  
  
• 2010年，CSS3正式上线，同时推出了响应式布局，2012年推出了媒体查询（也叫断点，这个概念后面再具体展开解释）。媒体查询可以移动内容，改变文字大小，隐藏或显示内容块，调整边距和空白，以及调整其他的CSS样式。因为有了这两个东西，上线以后，自适应布局和响应式布局就作为更先进的布局用法而被迅速地使用。
  
  

4.2 响应式和自适应的区别

自适应和响应式布局很多初学者经常会混淆，确实他们的原理是非常相似的，都是检测设备，根据不同的设备采用不同的css。先来看下他们的区别：

自适应（Adaptive Layout）

基于用户体验，技术人员至少需要开发三套界面，将差别较大的屏幕尺寸（如PC端、手机端、平板端），去创建多个不同的设计稿，每一个设计稿去对应一个用户实际的尺寸范围，根据预先设置的判断标准范围进行适配。像大多数的平台网站、商城网站都使用自适应技术进行开发。

响应式（Responsive）

技术人员只需开发一套界面，而不是为每个终端做一个特定的版本，在代码中嵌入一些布局的判断，通过检测不同分辨率，代码自动进行处理，实现布局变化、尺寸缩放等，实现不同布局和内容适配。

此时设计师看到这是不是会有疑问🤔️，怎么判断一个线上的网址是响应式还是自适应呢？有个很简单的方法：同一个页面在不同尺寸的屏幕上访问时，看网址是否一样，只有一个网址为响应式，有多个不同的网址为自适应

4.3 如何选择用自适应还是响应式

• 使用响应式：网站功能不多，用户交互少，升级低频或主要使用场景在桌面端，建议使用响应式。响应式成本较低，从运营的难易和维护的便利性考虑会更好，只要搞定网页端，其他的也都搞定了。例如官网、B端后台
  
  
• 使用自适应：需要兼顾用户在桌面端、Pad端、移动端等多个设备间的操作习惯，或从页面个性化多功能方面考虑，自适应设计更合适。因为这样可以更好的为用户提供功能全面，用户体验更好的界面。例如功能复杂、用户交互频繁的网站、电商类网站，用户量较大的网站选择自适应更合适。

五、为什么用栅格系统来进行响应式设计

响应式可以响应的前提有两点：

1、页面布局具有规律性

2、摆脱像素，元素宽高用百分比代替固定数值，容器按比例实现

而栅格系统页面布局具有规律性、元素宽高可用百分比表示，这两点正是栅格系统本身就具有的典型特点，我们透过栅格化布局的设计系统为响应式适配打下良好的基础。

六、如何利用栅格进行响应式设计

6.1 响应式适配方式

定义响应式规则时，我们除了遵循一些基础的布局原则外，还需要因应业务的属性去做结合。布局响应式时，内容区模块结构如何变化呢，简单介绍几种常见的变化形式：

1）拉伸布局

布局不变，内容在屏幕显示区域内进行相对拉伸，以达到布局完整。

如下图微信公众号后台的卡片适配采用的就是拉伸布局的形式，这种实现方式成本低，在响应式中大量的被运用。

2）等比缩放

布局不变,内容在屏幕的相对位置进行等比例缩放，这种方式不会产生任何布局重构影响，适配简单。

一般在带有图片显示场景中使用，如站酷的布局采用的就是这种形式，需要注意图片素材放大后清晰度的问题。

3）扩展布局

布局不变，内容可灵活按照屏幕比例进行增加或减少、扩展为多行或多列等。首先需要通过最小单位选择一个基本尺寸，然后以基本尺寸的倍数构建每个盒子框，就会出现一个个网格

如下图花瓣的布局页面所示，在网页收缩过程中，经过一个断点就会自动减少最边缘元素，其他元素基本保持不变。栅格列数随着浏览器宽度的减少而减少，边缘图块自动换行，或者有时会溢出滚动条。采用此方案需要做数据源的补足，保证内容展示合理。

4）固定布局

以像素px作为页面的基本单位，内容不会随着本身窗口宽度进行改变，窗口缩小后时内容会被遮挡

如人人都是产品经理网站所示，整个网站采用的是固定布局，并没有进行适配。可用性不强，屏幕分辨率过小时内容会被遮挡

5）分栏布局

布局改变，充分利用不同设备、不同屏幕尺寸的差异化，通过分栏布局形式重新对内容展示做位置变化，进行整个屏幕更合理化的分配。此布局页面结构产生变化，需要重构UI框架，有一定的开发成本。

6）混合布局

很多时候，单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能是保持简单轻巧，而且同一断点内（发生布局改变的临界点称之为断点，后面内容会讲到）保持统一逻辑。否则页面实现太过复杂也会影响整体体验和页面性能。一般通栏、等分结构的布局适合采用弹性布局方式，非等分的多栏结构布局则需要采用混合布局的实现方式。如antdesign响应方式就采用了拉伸布局+扩展布局+分栏布局+固定布局

6.2 响应式策略

响应策略就是当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是Columns、Gutters、Margins以及由Columns跟Gutter组成的盒子（Box）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。

这里我们有个概念需要先了解一下：

断点：每个视窗宽度的最小值是触发响应的关键值，这个关键值即断点。断点是具有特定布局要求的预定屏幕尺寸的范围，在给定的断点范围内，布局会根据屏幕大小和方向进行调整，超出范围则相当于达到某个临界点，界面布局会发生变化。 以 Ant Design Pro 的页面进行拆解，用浏览器打开一个响应式网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。

你会发现它在 576、768、992 的尺寸中，页面布局发生变化，然后根据屏幕断点之间的页面布局，采用向下兼容的适配方式,响应策略如下图

需要特殊说明的是，在该套响应策略中，页面最小响应到576的页面宽度，当视窗到达这个宽度时，浏览器会限制视窗进一步缩小，因为当页面宽度比它还小时已经无法有效展示数据了，所以进一步的缩放是毫无意义的。

6.3 案例-工作台适配

上文中我们已经完成了基准尺寸1440*900px的设计，那下面笔者仍然以这个案例教大家如何进行适配。

首先我们先来分析一下，内容区域根据宽度定义一般都两种方式

1）内容区域定宽

内容区域定宽是指内容区域在每一组视窗宽度区间内，都会设定一个最大值（Max-with），当内容区域宽度小于最大值时，区域内元素会响应视窗的变化；达到最大值后，内容区域不再响应视窗的变化，而是宽度保持该最大宽度值不变，此时我们通过增加页面两侧的margin值来响应视窗的变化。Flex Margin就是应对此情况的动态页边距

2）内容区域宽度流式

内容区域宽度流式 (fluid-width Container) 的后台系统，它的内容区域 (Container) 距离页面两侧的页边距Margin是定值，因此视窗有多大内容区域就展示多大 案例是左右布局，内容区是中后台的图表，考虑到全局还有表单、详情页、表格等负责页面，内容区域栅格一直跟随视窗变化，复杂布局下不至于太紧凑，用户能看到的内容也更多。

所以案例中我们采用内容区域的宽度流式。 确定了内容区域的响应方式后，我们再来考虑里面模块的响应规则，这里可以参考Ant Design Pro 的响应方式，内容模块采用拉伸+拓展+分栏结合的混合布局适配方式，如下图所示

结合各业务模块的展示效果，将屏幕断点可以划分为 320、576、768、992、1200，响应策略如下图：

为了方便直观的向开发工程师与团队里的其它小伙伴沟通，我们可以把这个响应策略制作成如下的表格，并在页面中标注说明相关元素的变化规律，供自己与开发参考。

Q&A

Q1: 当栅格系统中出现无法整除的情况，如何处理?

A1:理论上来说，可以通过调整固定区域如导航的宽度来改变内容区域的大小，使列宽可以整除，且边距和槽宽能被最小原子单位（如8）整除。但如果仍然出现无法整除的情况，可以优先调整页边距的数值，无需追求完全整除

Q2: 盒子模型填充栅格时，盒子对齐的是栅格还是水槽，里面内容的元素也要同等对齐吗？

A2: 盒子模型对齐的是栅格而非水槽。而这个盒子里面的内容元素不受栅格的约束。只要父级模块对齐栅格，子级元素可以不对齐水槽，同时子模块也可以有自己的栅格系统

Q3: 一套栅格搭建完成后，是否全局都要强制对齐栅格？

A3: 并不是，栅格用在典型页面工作台、数据概览、卡片页居多，非常规设计时不需要栅格系统，甚至在特定情况下，我们也可以打破布局栅格设置，来组织页面内容。打破布局栅格可以使元素突出，吸引视觉焦点（比如：全站横幅，或是市场运营类内容）；但需要注意对中后台系统而言，过多使用会导致页面凌乱。

Q4: 设计稿基准尺寸是如何定的?

A4: 我们一般分两大类情况来讨论这个问题

1）自研系统给公司内部员工使用：由于公司批量采购设备的原因，公司内部员工的屏幕分辨率往往会比较统一，这种情况下我们需要拿到这个数据，然后以它作为基准尺寸开始设计。因为虽然响应式设计的目标是让页面在每个分辨率下都有最佳的体验，但实际开发中毕竟存在损坏，设计还原很难100%，因而大多数情况下还是基于基准尺寸的设计与开发，在用户端显示效果最佳、体验最好。

2）系统是平台级面向全网用户，或者虽然是公司内部使用，但是并不能统计到内部员工屏幕分辨率情况，就可以以1440*900作为基准尺寸开始设计。国内PC端屏幕分辨率排名前三的分是1920*1080、1366*768、1440*900；可以看出1920px 占比最多，但以它作为基在面向小尺寸屏幕的时候多数都很不友好，而1440的尺寸实际上是处于中间位置，如果以它为基准设计，最终向上向下响应适配后，相对误差最小，从而达成用户体验的最大公约数。

Q5: 中后台系统必须做成响应式的吗？

A5: 并不是必须的，是否要做响应式主要是根据后台产品面向的用户来定的。如果是公司内部使用的系统，且员工配备的桌面设备都是有统一的分辨率，就可以不做响应式；如果是面向全网用户的后台产品或公司内部的桌面设备并没有统一的分辨率规格，那么就需要做成响应式。当然，实际业务是否做响应式还有技术实现、时间、人员成本等各方面因素的考虑，技术侧可以先不实现，为了后期的拓展性，设计侧需要先行考虑

Q6: 如何选择断点，为什么不是基于设备断点

A6:断点的设置一定是基于页面具体内容，并参考网站用户的设备分辨率数据，设计过程中在一定区间内拉升或压缩，已经无法用相同的布局内容时，必须改变内容展现方式时，而产生的关键尺寸的节点。

将断点设置为与某些常见设备宽度相同，页面展现的效果不佳的可能性极高。

那么完全不考虑设备吗？

不是的，设备仍然很重要，只是不应首先考虑它们。在一开始最好是不要只考虑页面设计在特定设备上的显示效果，而是应该从更通用的访问设备，比如手机尺寸、平板电脑尺寸及桌面显示器尺寸去考虑它。

结束语

栅格篇正式完结撒花啦～

我是子璐，希望文章对你有所帮助

参考：

https://www.fleede.com/395.html

https://www.zcool.com.cn/article/ZNzg0ODQ4.html

https://www.zcool.com.cn/article/ZODk0NjIw.html