h5移动端适配

1. viewviewport 缩放适配

(()=> {
  let viewprot = document.querySelector('#viewport');
  // 获取设备宽度
  let curWidth = document.documentElement.clientWidth;
  // 计算缩放的尺寸 基于iPhone678设计稿
  let target = 375;
  let scale = curWidth / target;
  viewprot.content = `initial-scale=${scale},minimum-scalc=${scale}, maximum-scale=${scale},user-scalable=no`;
})()

2. rem适配

• 原理：就是把所有的设备分成相同的若干份，再计算元素宽度所占的份数。
• 举个例子，iPhone5和iPhone6对应的设备宽度分别为320px和375px，现在我们将其分为100列，那么对应每一列为3.2px和3.75px。看见没，不同的设备宽度，对应的每一列的宽度就不一样。之后我们再设置元素的宽度时，以列为媒介即可。
• 比如同样一个div，我们设置它的宽度为10列，那么iPhone5中div的宽度那就是32px，而在iPhone6中该div的宽度就是37.5px。你看这种方式是不是就实现了不同设备宽度的设备中，一个元素的大小可以等比例的缩放。

((doc, win, designWidth)=> {
  let html = doc.documentElement; // 获取 html 根元素，一会要设置根元素字体的大小
  const refreshRem = ()=> {
    let clientWidth = html.clientWidth; // 获取 css 像素（设备的宽度）
    if(clientWidth > designWidth) {
      // 如果设备宽度都大于设计稿了，那么测量出来是多少就是多少
      html.style.fontSize = '100px';
    }else {
        // 计算出比例
        // 拿 iPhone6 为例，375/750=0.5
        // 相当于每一列的宽度为 0.5px，分成了 750 列
        // 但是浏览器是不允许这么小的字体大小的，因此乘上一个 100
        // 变成每一列的宽度为 50px
        // 之后在将设计稿尺寸转换为列数时，也不需要繁杂的计算
        // 假设设计稿量出来为 375px => 187.5(CSS像素) => 187.5/50(每一列宽度) = 3.75(所占列数)
      html.style.fontSize = 100 * (clientWidth / designWidth) + 'px';
    }
  }
  doc.addEventListener('DOMContentLoaded', refreshRem)
})(document, window, 750) // 750 是设计稿起稿的宽度，不同的起稿设置不同的参数