【方案】前端UI布局的绝技,响应式布局,多端适配

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

本期讨论网页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布局实现起来更为简单直观,维护起来也更加方便。

相关推荐
前端小趴菜0511 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴4 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...5 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts