【网站架构】同是响应式布局为什么我的页面布局是错乱的？布局工作占了大部分前端工作量怎样才能做好响应式布局？一份代码如何适配多个显示端？

​

大家好，本期我们来聊一聊响应式布局。

响应式布局解决的是我们前面提到的《前端架构需要解决问题》中的适配性问题。

响应式布局本身只是一个概念 ，它希望只用一份代码，适配所有大小的屏幕 ，也就是无需根据手机、PC网页写两份代码。

当然，响应式布局也不仅适用于跨终端（PC、平板、手机）的显示上 ，毕竟单纯的PC网页或者手机网页，也会存在不同的浏览器大小或屏幕大小的问题 ，响应式布局的具体实现方法有很多 ，如Flex弹性布局、Grid网格布局、Bootstrap的栅格布局、Element-ui的布局系统等。 

但是，在实际项目中，这些布局工具并不一定能很好的解决问题 ，往往看起来是页面做完了 ，但一旦缩放浏览器窗体大小、换成较大或较小的显示器、或者用手机打开时 网页元素就会严重错位， 这些问题很多时候我们都不以为然， 认为到项目中后期集中改就好了。

但是，往往到项目后期才发现 这些页面布局根本就写错了，或者是瞎写的，还不如重写一遍 这样，会导致前端成本远超预期，项目一拖再拖 ，因为前端网页的工作量大部分都集中在网页布局上， 而非普遍认为的功能上（功能无非是调用API，获取数据后跳转或更新页面元素）。

造成这些问题的原因，不是我们用的响应式布局工具不够好， 而是使用者对网页布局的认知或者做法是错误的。接下来，我们讨论怎样才能做好响应式布局 。

首先，我们需要有正确的布局认知。错误的布局认知是，一下子看到了网页的所有元素。 这样的话，由于需要顾及的细节太多，反而会导致无法很好地实现响应式布局。

就好像“把大象塞进冰箱一共需要几步”的问题一样， 如果一开始就着眼于全部细节 ，则不会得出只需要三步的答案。（打开冰箱门-把大象塞进去-关闭冰箱门）

而正确的布局认知应该是有层次的， 我们推荐把页面布局分为两层：

1、整体层布局

2、模块层布局

整体层是忽略页面细节，把一个页面分为几个合理的区域（模块），模块层是各个区域的具体细节。

1、整体层布局

我们先讲整体层的布局 ，整体层布局是考虑页面各区域的布局 ，虽然设备屏幕的分辨率是各式各样的， 很多布局工具，如BootStrap的栅格布局 ，会按照浏览器横向分辨率将网页划分为 ：大屏显示器（≥1200px）、桌面显示器（≥992px）、平板（≥768px）、手机（≥576px）、小屏手机（<576px）。

但是，按照我们的经验，一般情况下，我们只需要关注768px分水岭就可以了， 因为768px以下是手机， 768px以上的是平板、pc等， 所以768px是一个质变点。

如果不使用布局工具的话，可以写成左边的样子，根据屏幕宽度自动替换css文件， 如果使用BootStrap栅格系统等布局工具的话，可以写成右边的样子 ，对于整体布局而言，我们更推荐使用BootStrap栅格系统等布局工具。

但是这种布局工具也有局限， 就是它们一般只会横向把屏幕分为12或者24份，让开发者选择每一个区块横向占几份，这样，就不能100%还原UI设计了。

但是，既然选择了多分辨率适配 ，本身就不可能100%还原UI设计（UI设计是在固定尺寸下设计的） 所以，对于整体层布局而言，只需要选择与UI设计相近的比例即可。

以上都只关心区域的宽度，那区域的高度呢？ 其实，在响应式布局中，一般默认高度是作为宽度变化的补偿 。

也就是说，某些网页内容在较大的屏幕下，可能只需要1行就能显示全了，但是较小的屏幕可能需要多行，也就是在较小屏幕下，高度需要增大，所以，一般情况下，高度是不用特别关心的。

但是，诸如导航栏需要与内容等高、列表区域铺满页面等场景 ，则需要考虑区域的高度，如果是导航栏需要与内容等高等场景 ，则推荐使用aside标签。如果是列表区域需要铺满页面等场景， 则推荐使用calc设置区域的高度。 

2、模块层布局

模块层是考虑区域元素细节的布局，模块布局是比较精细的布局 ，但是相对于整体层布局， 模块布局一般不受屏幕大小的影响。所以，我们不太推荐使用BootStrp栅格布局等工具。

我们推荐直接固定一部分元素的尺寸 ，其他元素使用calc相对这个固定尺寸的部分做填充。

当然，一些列表形式的模块， 还是推荐使用BootStrap栅格布局等布局工具做初步布局 ，但是细节元素还是推荐上述提到的方式布局。

一些特殊情况下，一些模块细节在pc网页、手机网页需要做区分 。例如，侧边导航栏，在pc中需要固定显示，手机中则是下拉菜单 。这种情况下，则最好把有区别的部分各写一份代码 ，通过css的@media或者BootStrap等布局工具控制显示隐藏 。

总结

如果按照整体层模块层布局 ，则能更好的使用模块化的框架（vue、react等）。 在模块化的框架下 ，整体层只管区域的布局 ，而模块层则可以封装成一个个模块， 增加模块的复用度。

当然我们仍然不推荐模块互相嵌套的方式 ，因为存在BootStrap、Element-UI等组件工具箱 。所以模块并不需要互相嵌套以降低代码量。