那么留白呢？ 更不可行了，手机设备本身宽度就小，再留白就基本看不了什么了。
所以为了让这种 web 能够像原生 app 一样的体验，就出现了 H5 技术。进一步衍生了 Hybird , 虽然比不上 app 性能，但是在 热更新 上占有绝对优势，有着原生无法替代的地方。
下面我们来就来实践下 H5 最基本的技术之一 移动端响应式布局 。
实践
解决方案一：rem + pxToRem 概念
css 中用于计量的单位有两种，一种是 绝对单位 ，另一种是 相对单位
绝对单位
对于绝对单位，一般来说常用的也就
px， 其他的可能打印需要用到相对单位
对于相对单位来说，
em 和
rem 属于一对，
vw 和
vh属于一对。前一对相对于 字体大小 ，区别在于
rem 相对于 根字体 ，对于我们控制整体的大小相对容易些，所以我们可以使用它来控制整个页面的缩放。后一对，相对于视窗的大小，这个将在下一个节中发挥主要作用。
原理
监听屏幕视窗的宽度，通过一定比例换算赋值给
html 的
font-size 。此时，根字体大小就会随屏幕宽度而变化。将
px 转换成
rem , 常规方案有两种，一种是利用
sass /
less 中的自定义函数
pxToRem ，写
px 时，利用
pxToRem 函数转换成
rem 。另外一种是直接写
px ，编译过程利用插件全部转成
rem 。这样 dom 中元素的大小，就会随屏幕宽度变化而变化了。实现
动态更新根字体大小
const MAX_FONT_SIZE = 420// 定义最大的屏幕宽度
document.addEventListener('DOMContentLoaded', () => {
const html = document.querySelector('html')
let fontSize = window.innerWidth / 10
