VUE移动端适配

VUE移动端适配

安装：npm install postcss-pxtorem@5.1.1 --save

// 注意：6.0.0版本配置有误，暂未去了解处理；

// 解决办法:安装5.1.1版本，实测该版本能用

一、在src目录下新建 libs/rem.js 文件
放入以下代码：

(function (doc, win) {
  var docEl = doc.documentElement
  var isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  var dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1
  dpr = window.top === window.self ? dpr : 1
  // 被iframe引用时，禁止缩放
  dpr = 1
  var scale = 1 / dpr
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  docEl.dataset.dpr = dpr
  var metaEl = doc.createElement('meta')
  metaEl.name = 'viewport'
  metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale
  docEl.firstElementChild.appendChild(metaEl)
  var recalc = function () {
    var width = docEl.clientWidth
    if (width / dpr > 750) {
      width = 750 * dpr
    }
    // 乘以100，px : rem = 100 : 1
    docEl.style.fontSize = 100 * (width / 750) + 'px'
  }
  recalc()
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
})(document, window)

 

二、在main.js中引用

import './libs/rem.js'

 

三、修改.postcssrc.js 文件
在module.exports的plugins中加入：

module.exports = {

    plugins: {

        "postcss-pxtorem": {

            rootValue: 100,

            propList: ["*"],

        },

    },

};

 

完成，在项目中开发直接可以按照px单位来开发

设计图为750PX基准，打包以后的单位为100px=1rem；更方便于开发

完事以后记得重新运行哟！

搜索

复制