吃透移动端 H5 响应式布局｜深入原理到目前最佳实践方案 _小知识

文章插图

前言最近写了第三个移动端 H5 的项目，准备记录下自己在 H5 项目中的一些实践探索。移动端 H5 与 PC 端开发最大的区别之一，大概就是响应式布局问题。
那么下面我们就来聊聊移动端响应式布局，了解他的来龙去脉，对现有的最佳解决方案探索吧。
问题全文将围绕下面几个问题进行论述和展开：

移动端 H5 相关页面，相比 PC 端有哪些值得注意的点？
移动端 H5 响应式布局有哪些解决方案？
什么是 rem ？如何在项目中完美使用它？
vh/vw 是最佳解决方案吗？它有什么优势和缺陷？
大型开源库里面常用的解决方案是什么？
怎样快速搭建一套移动端布局解决方案？

由来概念什么是 H5 技术？H5 这个命名本身是一个很不讨巧的命名，咋一眼看上去认为是 html5，或者第 5 级标题的标签，对一些人会造成了不小的误解。

比如：我的一个某后端同事，谈论到 H5 很简单，HTML 之前我也学过一些，以后要是你请假，我来帮你写。

我是一脸蒙蔽，H5 === HTML?

再看看，搜索引擎中 H5 是什么？（引用来自谷歌词条第一页）

文章插图

如此看来，将 H5 视作 HTML 的大有人在，而 H5 这个概念只在中国特有，所以对外国人来说他们也认为是 HTML，所以，对于外国人和非这个领域的人来说，他们存在一样的误解。
目前的 H5 算是一个比较大的概念了，我认为的 H5 技术是一系列移动端 web 前端技术的集合大致用一个韦恩图表示如下

文章插图

我们这里只谈 Web 前端中 H5 技术，H5 技术本身是用于移动端的 web 网页。由于 App 本身有个 “ webview ” 的容器，在容器里可以运行 Web 前端相关代码，由此 H5 和原生 App 结合又衍生出来了 Hybrid App 技术。
Hybrid App 技术大致原理

文章插图

这是我给公司同事普及 H5 知识绘制的图像。
移动端 web 和 PC web 的区别回想一下，在 PC 端我们是怎么布局的呢？
一般采用两种方案，一种是 min-width 限制最小的宽度，浏览器宽度小于 min-width 就直接滚动。另外一种呢，就是留白。设置页面一个基础宽度，超出的部分留白。
但是这两种解决方案在移动端可行吗？
【吃透移动端 H5 响应式布局｜深入原理到目前最佳实践方案】移动端手机的宽度，大多不一致，而且没办法进行窗口的缩放。让移动端产生滚动，体验更加糟糕，更别说和原生 App 性能相比较，基本页面展示体验就很差了。
那么留白呢？更不可行了，手机设备本身宽度就小，再留白就基本看不了什么了。
所以为了让这种 Web 能够像原生 App 一样的体验，就出现了 H5 技术。进一步衍生了 Hybird, 虽然比不上 App 性能，但是在热更新上占有绝对优势，有着原生无法替代的地方。
下面我们来就来实践一下 H5 最基本的技术之一移动端响应式布局。
实践解决方案一：rem + pxToRem概念css 中用于计量的单位有两种，一种是绝对单位，另一种是相对单位。
绝对单位