我们应该如何在响应式系统中使用搜索？

1。切断的位置越多越好吗？

可选。裁切次数越多，不同尺寸页面之间加工产品的过程，但设计和开发的成本也会相应增加。

断点是控制页面布局变化的多个值。简单来说，当页面达到断点值时，页面布局就会发生变化。

关于停止点，你需要建立以下心理概念：

1。一般来说，一个产品的断点

数量为4-6个，因为基于每个断点如果给定多页面布局方案，断点数量增加，那么随着产品页面的扩大，过渡会更加平滑。 ，产品设计和开发的成本也越高。

2。截止值没有绝对的数字规范

您可以根据产品的页面布局和尺寸来定义它，也可以根据用户使用的设备来设置它。你也可以认为，当你的页面宽度被压缩变窄，导致页面布局发生变化时，你可以给页面分配一个break值。

例如下图是一个产品的截止值和页面结果的情况。 756px和974px不是标准值，但只要满足产品的设计和需求，都可以设置为默认值。 。幸运的是，该值不是整数，因此不容易记住：

3。对于匹配每个断点的网格系统，没有绝对的标准解决方案。值下的栅格列数（Column）、边距（Margin）和间隙（Gutter），以及这些值之间的变化规则。

事实上，网格和断点都是设计模式，用于帮助产品对齐。因此，布局必须与你的产品页面的设计相匹配，这样才能更好地服务于产品，更好地体现产品在不同环境下的外观。

因此，不建议使用您的产品来实施其他现有解决方案。每个产品都有自己的个性，对应产品的网格解决方案也是独一无二的。

2.断点的实际应用

我以B端产品的断点为例，给大家详细讲解一下断点的作用和实现方法。

本产品采用简单的设计方法，如下图所示。我再次强调一下，下图中的网格方案不仅仅是标准方案，而是最适合该产品的方案，供大家参考（图很小，你可以放大看，还会有更多）下）大图更清晰）：

考虑到产品的性质和开发的方便性，这个网格系统设置了两个固定值：列数（Column）为空。 12列；间距（Gutter Width）始终为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布局：

所以我们可以看到整个产品有三个要点，布局有三种主要风格：

1. 当页面宽度较大时比640px对齐，即1344px像素的页面布局方式（适用于PC）；
2. 当页面宽度在640px-375px之间时，是布局，即640px断点的页面布局样式（适用于Pad）；
3. 当页面宽度小于等于375px时，是页面布局方式（适合移动端）。

我们现在在所有页面上使用 12 列。您还可以根据您的产品设计，将 375px 页面的 12 列布局更改为 4 列布局。我必须重申一下，这个网格解决方案以及里面的数据并不是唯一的解决方案或行业标准，而是最适合这个产品的解决方案，仅供大家参考：

当我们进入开发时，这张图也用于澄清，以便双方就学科达成共识并初步界定核心价值观和使用条款。

元瑶微信公众号：长弓童子