pc端如何做自适应呢？

    <!-- 默认html的font-size的大小是16px  1rem = 16px  -->

    <!-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候， html的font-size将会跟着发生改变 -->

    <!-- 实现的步骤如下 -->

    <!-- 1 借助flexble.js文件 -->

    <!-- 2 将flexble.js文件中的屏幕适配分为24份。 那么随着屏幕不断发生变化的时候 屏幕的fonst-size的大小就是当前屏幕的尺寸/24了 -->

    <!-- 3 屏幕适配 当设计稿为1920的时候，而我的屏幕是1240， 而设计稿的盒子尺寸是500的时候，那么我的盒子尺寸应该(500/1920)*1240； 基于这样的运算会比较复杂 -->

    <!-- 4 下载插件帮助计算 pxtorem;  -->

    <!-- 5 因为我们量尺寸都是基于设计稿去量的 所有我们要将pxtorem的尺寸进行修改 在设置里面找到修改尺寸的地方也就设计稿的尺寸1920/24 = 80 -->

    <!-- 6 这样我们就可以基于原设计稿的尺寸来进行测量，而在我们这里转化为rem就可以了 -->

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize()

  // set 1rem = viewWidth / 10
  // pc端屏幕适配 一般将flexble分为24份
  // 默认情况下是将屏幕大小分为了100份
  // 原理 不管屏幕是多大 反正默认指定的分数
  function setRemUnit() {
    // 这里默认是10等份，手动改为24，此时1rem=1920/24px即80px。（设计稿是1920px的）
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
})(window, document)