这个年代，几乎任何一个像样的网页/桌面端产品都会需要响应式布局。
可无奈除了Figma之外，包括Sketch在内的大部分设计工具都缺少响应式布局功能。
这就导致很多设计师对响应式布局一直处于雾里看花的状态，缺乏清晰的结构化认知。
网上大部分文章讲响应式时，都会把容器、图片、文字等不同的元素拆开来讲，这样就搞得更复杂了。
作为一个前端出身的设计师，感觉这东西从底层逻辑拆解可能会更清晰，因为总共不过3种基础布局+2种混合布局而已，看似复杂其实简单。
首先明确几个基本概念
1.横向才需要响应式布局
这就好比Word文档，页面的纵向高度从来都是看内容能撑多满，而宽度默认是固定的。
当这个宽度不固定时，才需要响应式布局。
所以说，响应式布局规则主要针对的是横向，而非纵向。
2.一般元素尺寸变化，间距不变
常规的响应式布局元素间距不变的，重点是元素本身的尺寸变化上。
只是这个间距，可能是0，也可能是其它值，但一般是固定的。
间距如果永远不变，那么小尺寸不会留白太多吗？大尺寸留白又太少了吧？
这个问题，下面就能得到解答。
3.根据宽度切换布局方式
一些响应式布局做得好的网站，可以从一个正常的网站缩小成移动端，这是用一套布局规则实现的吗？
显然不是这么单纯。
很多响应式布局会根据不同的页面宽度切换布局方式，例如小尺寸是用一种布局，中尺寸是换一种，大尺寸又变成另一种。
例如下图，小尺寸让图片单独一行，而大尺寸时又将图片尺寸加大，有明显的布局切换。
而小、中、大尺寸之间的零界点，就被称为断点。
好了，以上说的这三点基础概念理解了吗？
其实不难，但这些东西要配合前端基础才好理解，我们即将开始的前端基础课程就会手把手教你从实践中感受：
总的来说，所以下面讲的这些规则只讲横向不讲纵向，间距固定，而且可能根据容器宽度断点切换。
3种基础布局
1.占满
这种横向填满整个空间的布局是最常见的，前端里的容器和文字默认都是这样。
这种使用非常广泛，随手打开一个资讯类APP，外层都是这种布局：
2.固定
像这样不管外部容器宽度如何变化，自身宽度固定依次排列，是最简单的卡片布局。
例如百度网盘的桌面端的缩略图：
还有 YouTube 网站横向排列的页签也是这种布局：
然而，这并不是最典型的卡片布局方式，这个后面再具体说。
3.等比
定好每个元素横向占比，宽度随着外部容器一起变化。
这种其实单用较少，一般移动端底部导航一般使用的这种（适配不同宽度的手机屏幕）：
Ant Design Pro 案例首页的表格，明显也是用的这种等比布局：
好了，基础布局就这3种了，在这基础上还有2种混合布局。
2种混合布局
4.占满+固定
这种使用非常广泛，例如左侧占满右侧固定，就是图文列表：
左侧固定右侧占满，就是左导航布局：
两端固定，中间占满的布局也很常见：
把中间那一块留白就是最常见的顶导航布局：
还有很多例子都是这样，就不一一列举了。
5.等比+断点
其实大部分卡片布局都是这种，使用非常广泛。
之所以不用固定布局，是为了避免边距时大时小，造成视觉上不稳定。仔细看下图，是不是右侧的边距时大时小？
而且，如果页面宽度比原先大很多，原先的卡片尺寸就会显得太小了。
那么这种等比+断点的布局具体时怎样的呢？我画个案例解释下。
假设容器宽度在某个宽度范围内，卡片全部按照4列来等比排列：
容器宽度超过这个范围时，列数增加到5：
而容器宽度小于这个范围时，列数减少到3:
把这几种状态结合起来，就形成了最常见的卡片布局：
大部分卡片都是用的这种，例如电脑的文件管理器、YouTube和Dribbble：
总结一下
就这五种，构成了几乎所有前端常见响应式布局，任何元素不管是容器、文字还是图片，都能往里面套。
这么算来好像也没多复杂吧？但为啥很多响应式布局介绍都喜欢把容器、文字和图片分开来讲呢？
其实把这三种不同元素分开来讲也有道理，因为他们虽然横向布局规则一致，但是纵向响应不同。
例如文字，宽度变化的同时，高度会根据字数来调整：
比如图片，我们通常的用法是，宽度变化时，高度会等比例缩放：
再看容器，宽度变化对高度并无直接影响，因为高度一般都看内部元素能撑多高。
如果你在考虑响应式布局时，把这三种元素的高度响应也考虑进去，那确实就复杂多了。
不过，高度变化一般默认就是按照上面说的这个规律，熟练后可能也会像我这样觉得：“理所当然的规则，无需多想。”
其实很多前端的心态就是这样，“这不是理所当然，你咋就不理解？”
前端用代码做页面，设计用绘图工具做页面，结构原理天差地别，各自形成一套“理所当然”的认知。
这就是为啥很多设计师和前端沟通困难，互相觉得不专业了。
其实前端搞懂设计工具还是比较简单的，但是设计搞懂前端代码就很难了。
虽然Figma能实现占满和固定布局，但实现等比和断点但是很麻烦（只能勉强模拟部分效果）。