B端计师要知道的栅格设计( 三 )

文章图片
2.响应式策略
响应策略就是当视窗（Viewport）发生变化时，内容区域的元素如何去响应，具体到我们当前的栅格系统，就是Columns、Gutters、Margins以及由Columns跟Gutter组成的盒子（Box）四者的值（主要是宽度）如何变化，以及在这种变化之下我们页面的布局如何调整。
这里我们有个概念需要先了解一下：
断点：每个视窗宽度的最小值是触发响应的关键值，这个关键值即断点。断点是具有特定布局要求的预定屏幕尺寸的范围，在给定的断点范围内，布局会根据屏幕大小和方向进行调整，超出范围则相当于达到某个临界点，界面布局会发生变化。
以AntDesignPro的页面进行拆解，用浏览器打开一个响应式网站，检查元素，右上角会显示视窗当前的分辨率，慢慢缩小视窗的宽度，找到页面布局的变化点，就是我们上面说到的断点或者次断点。

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

文章图片
需要特殊说明的是，在该套响应策略中，页面最小响应到576的页面宽度，当视窗到达这个宽度时，浏览器会限制视窗进一步缩小，因为当页面宽度比它还小时已经无法有效展示数据了，所以进一步的缩放是毫无意义的。
3.案例-工作台适配
【B端计师要知道的栅格设计】上篇中我们已经完成了基准尺寸1440*900px的设计，那下面笔者仍然以这个案例教大家如何进行适配。