移动端适配

1. main.js中引入phone.js

(function(doc, win) {
    let docE1 = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          // js获取当前设备宽度,document.documentElement.clientWidth
          let clientWidth = docE1.clientWidth
          if (!clientWidth) return
          if (clientWidth >= 750) { // 宽度 》 750， 平板或者桌面,建议设置margin居中
            console.log('clientWidth', clientWidth)
            docE1.style.fontSize = '100px'
          } else {
            // 移动端的适配
            docE1.style.fontSize = 100 * (clientWidth / 750) + 'px'
          }
        }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded', recalc, false)
  })(document, window)

2. 使用vw

/**
    设计图为750px，那750px = 100vw => 1px = 0.133333333vw
    => 100px = 13.333333333vw
    375(元素设计图宽度) / 100 = 3.75rem（单位为rem，会去乘以根元素fontsize）
    3.75 * 13.3333333 = 49.999999vw（刚好一半）
*/

   // 测试
   div {
      width: 3.75rem;
      height: 200px;
      background-color: skyblue;
    }
   // 主要设置
    html {
      font-size: 13.333333333vw;
    }
    @media (min-width: 750px) {
      html {
        font-size: 100px;
      }
    }
    body {
      max-width: 750px;
      margin: 0 auto;
    }

<meta name="renderer" content="webkit"/>
  <meta name="force-rendering" content="webkit"/>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  <meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover"> 
  // 样式按照750设计图的px写就好