大家好，欢迎来到停止重构的频道。

本期讨论网页UI布局。

网页UI布局是前端开发中占比较多的部分，做完网页布局也就差不多完成了一半的工作。

本期视频，我们不再讨论基础的UI布局。

我们希望满足响应式布局，一份代码适配PC/平板/手机等多端设备，希望尽可能适配视窗/内容变化。

我们按以下顺序展开讨论

1. 网页布局核心问题
2. 视窗变化
3. 内容变化
4. 我们的解决方案

网页布局核心问题

我们先抛开一切解决方案，观察网页布局本身。

一个网页像是一个大盒子，上面整齐放着小盒子或零件，小盒子中又可以放小盒子或零件。

如果所有的零件和盒子尺寸都是固定的，网页布局将是较为简单的工作，基本上就是将UI设计图翻译为HTML语言，甚至很多UI设计工具都可以直接导出HTML文件。

但是，现实的前端开发工作并不是这么简单的事情，核心问题是，网页布局中的这些盒子和零件的尺寸是变化的。

尺寸变化的问题又分为视窗变化和内容变化，以下将分别讨论其解决方案。

视窗变化

首先是视窗变化。

整个网页的大盒子，也就是网页的视窗是变化的。

比如仅仅用作PC端的网页，最终运行的视窗尺寸也是有变化的，因为用户显示器的尺寸不是固定的，而且PC浏览器的窗口大小也可以随意调整。

如果一个网页仅用于PC端或者手机端，即使视窗尺寸有所浮动，网页的整体布局一般是不需要有太大变化的，一般只需要微调局部，让内容可以正常显示。

但是，如果一个网页需要同时适配手机/平板/PC等多端的话，则可能会引起整体网页布局的变化。

以我们的手册网页为例，PC网页是左目录右内容，手机网页是上目录下内容，且详细目录需要隐藏起来。

这里需要特别说明的是，手机/平板/PC多端适配的前提，是网页结构是类似的。

比如仅仅是换一下区域的位置，或者仅仅需要某几个区域建立分身做特殊适配。

若网页特别复杂，且PC/手机网页的设计风格完全不一致的话，则适配工作量会非常大，还不如独立分开PC/手机端网页。

针对视窗的变化，我们一般是根据视窗宽度调整CSS样式。

视窗的宽度我们推荐以下几个梯度，其中视窗宽度小于768px的话，一般为手机等移动设备。需要考虑是否重新调整网页整体布局。

这里有个点需要注意，移动设备一般是可以横向、纵向旋转的。

以IPhone为例，竖着的时候，视窗宽度为390px 横着的时候，视窗宽度为844px。

所以，768px这个移动设备分水岭并不是绝对的，需要根据具体项目的适配要求而定。

这里需要补充说明的是，屏幕分辨率尺寸和浏览器视窗尺寸并不是完全等效的。

根据系统设置，一般1-3个物理像素等于1个网页视窗像素，比如iPhone的横向分辨率为1170，其浏览器视窗宽度为390px。

如果网页需要在移动设备运行，HTML的head中需要添加meta标识，不然网页会自动缩小。

针对视窗变化，一般是在CSS设置中，通过@media筛选视窗宽度进行样式覆盖，在网页开发调试时，需要测试这些推荐梯度下网页是否正常。

内容变化

接下来是内容变化。

网页的局部内容并不都是固定的，特别是某些内容是从服务端获取的。

比如需要做一个信息卡片的布局，左边的图片需要固定为25%的宽度，且长宽比为1:1，图片高度也决定了整个卡片的高度。

标题旁边需要紧挨着标签，说明区域占据一行且贴紧底部，内容区域自动占满剩余高度。

若按照经典的布局方式，比如float、flex等布局方式。

会非常的麻烦，需要一层一层设置下来，且样式改版时非常麻烦。

那有没有一种更为直观的方式，更贴近表格的布局方式呢。

这里推荐使用Grid布局，Grid布局的详细语法非常丰富，但是我们只推荐这样的做法：

我们希望先规划好网格的尺寸，然后通过标识绑定具体的网格区域。

以上面的信息卡片为例子，我们需要先规划好网格，包括行高、列宽、区域标识。

对应的CSS代码为，在最外层元素的CSS样式上开启grid布局，且通过grid-template设置网格行高、列宽、区域标识，通过gap设置网格间的间隙。

具体的子区域通过区域标识绑定，即可插入对应的位置。

相比于经典的flex、float布局，Grid布局的HTML结构也更加简洁。

这里需要补充说明的是，在网格设置中 行高、列宽中包含了2个较为特殊的单位：auto和fr。

auto指的是，自动适配区域内部的宽度或者高度，比如标题title的宽度设置为auto，则标签的位置会自动根据标题的宽度自动左右移动。

fr指的是，自动占满剩下的区域宽度或者高度，比如内容content高度设置为1fr，则自动填充剩余高度。

若说明区域也设置为1fr，则内容和说明区域平分剩余高度。

若说明区域设置为2fr，则说明区域的高度将会是内容高度的两倍。

Grid布局的好处十分明显，可以在一个地方管理网格设置。在修改网格布局时，会非常的清晰方便， HTML结构也更简单易懂。

比如，信息卡片在手机端需要改变布局方式，可以简单地设置手机布局样式，而不需要修改子区域的样式。

值得一题的是，仅通过调整布局来适配所有视窗是不现实的，某些区域可能需要建立分身进行特殊适配，在不同的视窗宽度显示不同的分身。

当然，Grid布局也有局限性，就是老旧浏览器对其支持有限。

老旧浏览器一般也就是IE11及之前版本，若网页没有IE的适配要求，则可以放心地使用Grid布局。

我们的解决方案

以上是原生CSS解决方案。

在我们的前端框架Trick2中，也更新了_BoxGrid组件，通过设置组件参数，即可快速实现Grid布局。

另外，为了适配复杂的多层布局，组件参数允许嵌套设置，快速实现多层布局。

一些时候，若需要给某些区域添加a标签跳转，这个组件也提供了_as参数，可以设置为a标签，并直接设置跳转路径。

总结

以上就是我们目前比较推荐的UI布局方式，这种方式最为直观，更接近直觉中网页是一个表格的感觉。

这里强调一下，我们并非推荐网页布局仅使用Grid布局，而是推荐在全局或者大片区域的布局上使用Grid布局，小局部可能使用经典的flex、float等布局方式更为方便。

在两年前，我们也讨论过响应式布局，但在这两年的实践中，我们发现Grid布局实现起来更为简单直观，维护起来也更加方便。