笔记-vue中使用rem,支持第三方UI

1.安装依赖

  postcss-pxtorem  用于将单位转化为 rem
  lib-flexible       用于设置 rem 基准值

2.修改package.json 

"postcss": {
    "plugins": {
      "autoprefixer": {
        "browsers": [
          "Android >= 4.0",
          "iOS >= 7"
        ]
      },
      "postcss-pxtorem": {
        "rootValue": 50,
        "propList": [
          "*"
        ]
      }
    }
  }

3.创建remConfig.js

export default function () {
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
      }
    if (!doc.addEventListener) return
    win.addEventListener(resizeEvt, recalc, false)
    doc.addEventListener('DOMContentLoaded',
      recalc, false
    )
  })(document, window)
}

4.main.js 引入remConfig.js 

  

posted @ 2019-07-24 11:38  一条咸咸咸鱼  阅读(650)  评论(0)    收藏  举报