详解｜响应式栅格系统的断点，到底应该怎么用？

     关注「长弓小子」看更多设计干货！

Hi，我是元尧。长按下图二维码加我微信，带你进设计师交流群，与上万名小伙伴一起交流成长！

「👇 添加好友请备注：设计交流」

   全文共 2052 字，阅读需要 7 分钟

‍我曾经在之前的文章中为大家介绍过有关「响应式栅格设计」的相关设计经验（回顾可阅读文章：响应式栅格系统落地和应用（一））。我也把一些同学对于「断点」概念的提问整理和分享给你，希望对你有帮助 ——

QUESTION

🤔 断点的数量是否越多越好？

   不一定。断点数量越多，产品在不同尺寸的页面中切换过程会越顺畅，但是设计和开发的成本也会相应的增加。

断点（Breakpoints）其实是控制页面进行布局变化的一系列数值。再简单点说，就是当页面到达某一个断点值时，页面的排版就会发生变化。

关于断点，你需要建立以下认知概念：

1. 通常情况下，一款产品的断点数量，在 4-6 个为宜，因为如果基于每一个断点都给出一套页面排版方案，那么断点的数量越多，产品页面被拉伸时的变化就会越顺畅，同时产品的设计和开发成本也会越高。

2. 断点值，没有绝对的数值规范，你可以根据你产品的页面布局和尺寸来确定，也可以按照你的用户常用的设备来设定。你也可以认为：当你的页面的宽度被挤压变窄，使得排版布局不得不发生变化时，就可以给出一个页面的断点值。

举个例子，下图是某产品断点值和页面效果案例，其中的 756px、974px 并不是常见数值，但只要它们符合产品的设计和功能需要，就可以将其定为断点值。只不过数值不是整数，不太好记：

3. 每个断点下对应的栅格方案，没有绝对的标准解法。你可以根据自己的产品设计需要，灵活地规定不同断点值下的栅格列数（Column）、边距（Margin）和间距（Gutter）的值，以及这些值之间的变化规律。

其实栅格和断点本身是设计方法，是用来帮助产品做好适配的。所以栅格方案要去匹配你的产品页面设计，才能更好地服务于产品，更好地展现产品在不同环境下的布局样式。

因此不建议用你的产品去套用其他已有的栅格方案。每个产品都有个性，产品对应的栅格解决方案也都是独一无二的。

EXAMPLE

📒 断点的实际应用案例

我以一款 B 端产品的断点为案例，给你具体讲讲断点的功能和应用方法。

这款产品使用的是相对简单的一种布局方式，见下图。我还是要再强调一次，下图中的栅格方案并不是唯一的标准解法，仅为一种最适合这款产品的解决方案，供你参考（图有点小，可放大查看，下文也会有更清晰的大图）：

由于考虑到产品的特性和开发的难易程度，这套栅格方案中设定了两个定值：列（Column）的数量始终为 12 栏；间距（Gutter）的宽度始终是 24px：

先来讲讲这几个断点数值的含义。

  1600px：  严格意义上来说，1600px 不算是一个断点值。这是我们画设计稿使用的画布宽度。页面中栅格的最大总宽度（也是有效的内容区）为 1280px：

也就是说当页面再被拉长时，栅格的总宽度始终为 1280px，只有边距（Margin）会不断增加。页面的内容布局不会发生变化：

当然，我们如果使用其他数值比如 1440px 或 1400px 作为画布尺寸也是可以的，其它数值也会相应变化。

  1344px：  这个断点值用于确定页面边距的第一个固定宽度是 32px。当页面的宽度从 1600px 向 1344px 的靠近时，页面的边距会不断缩小，直到达到 32px 这个最小值：

也就是说，当页面宽度在 1344px-640px 之间变化时，边距始终是32px，改变的只是栅格每一列的宽度，页面的内容布局也不会发生变化：

  640px：  这个断点值用于确定页面边距的第二个固定宽度 16px。也就是说当页面宽度小于等于 640px 时，边距始终是 16px，只改变栅格每一列的宽度：

这时页面就适用于 Pad 设备，页面的布局会在达到 640px 时进行直接改变：

  375px：  这个断点值用于确定内容区最小宽度为 343px，不过这是建立在手机尺寸唯一的理想基础上。由于手机型号不同，所以实际上小于 343px 的内容区域也是存在的，可以通过改变栏宽实现宽度的变化：

这时页面就适用于手机设备，页面的布局会在达到 375px 时进行直接改变。也可以根据产品的特点来决定是否沿用 640px 的布局样式：

所以我们可以看到，整个产品有三个主要的断点，布局有三种主要的样式：

- 当页面宽度大于 640px 时是一种布局，即断点 1344px 的页面布局样式（适用于 PC ）；

- 当页面宽度在 640px-375px 之间时是一种布局，即断点 640px 的页面布局样式（适用于 Pad）；

- 当页面宽度小于等于 375px 时，是一种页面布局样式（适用于手机）。

我们现在所有的页面都使用 12 列栅格，你也可以根据你的产品设计样式，将 375px 页面中的 12 列栅格变成 4 列栅格。还是要再强调一次，这套栅格方案及其中的数据并不是唯一的解法或行业标准，只是最适合这款产品的方案，仅供你学习参考：

我们在和开发做对接时，也是用这张图做讲解，让双方对布局规则达成一致，初步确定基础数值和使用规范。

如果你有更多与设计体系、栅格方案相关的问题可以在公众号后台留言 “设计系统”  看更多精华内容。也欢迎向我提问，带你加入设计师交流群，识别二维码👇👇👇添加我的微信。添加好友请备注：设计交流。

另外，我在知识星球每日输出的知识内容中，选择了一部分进行汇总，梳理了从【接到设计需求到产出设计沉淀】的完整流程，可以在公众号后台留言 “设计思维”  👇👇👇

想看与“工作经验”相关的精华内容，可以在公众号后台留言 “工作经验”  👇👇👇

学海无涯，盼你同舟！😊

- END -

欢迎长按图片👇👇👇加我微信

带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集！

「添加好友请备注：设计交流」