一行代码解决移动端的适配问题

　　rem  是一个相对单位，相对的是 html 元素的 font-size；例如，html 元素的 font-size 为 100px，那么 14px 就可以写成 0.14rem (14 / 100)。
　　如果使用 rem 作为适配方案，那么将根元素字体设为 100px 是一个比较好的选择。这可以为你在将期望的像素值换算为 rem 的时免去很多繁琐的计算。方案推导
　　假设我们手上有一份设计稿，设计稿中屏幕的宽度是 375px，其中某个元素的宽度为 200px，那么这份设计稿要表达的含义就是这个元素的宽度需要占屏幕的 200/375。
　　再假设我们用来测试的手机屏宽也正好是375px（即使不是，你也要先这样假设[汗]）。
　　为了方便开发，我们把 html 元素的 font-size 设为 100px，那么设计稿上这个宽为 200px 的元素，我们就应该设为 2rem。
　　好了，这个 2rem 千万不能再动它了。
　　当屏幕越大，让根元素的字体也随之变大，那么 2rem 对应的值就越大，这不就有了吗~~懂？[机智]
　　所以现在的问题就是要怎样去改变根元素的字体大小。
　　375px 的屏宽对应的是 100px 的字体，那 document.documentElement.clientWidth  的屏宽对应的字体大小就是：const clientWidth = document.documentElement.clientWidth const rootFontSize = (clientWidth * 100) / 375最终代码/* 以下代码放到项目入口文件中 */  function setRootFont() {   /* 1. 获取屏幕宽度 */   const clientWidth = document.documentElement.clientWidth   /* 2. 计算根字体大小，375 是你设计稿中的屏幕宽度 */   const rootFontSize = (clientWidth * 100) / 375   /* 3. 设置根元素字体大小 */   document.documentElement.style.fontSize = rootFontSize + ＂px＂ } setRootFont() window.onresize = setRootFont
　　样例：.box {   /* 高 200px */   height: 2rem;   /* 内边距 10px */   padding: 0.1rem;   /* 字体 14px */   font-size: 0.14rem; }