Vant+postcss-pxtorem 实现浏览器适配

Rem 布局适配
Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
看到最后有惊喜!

一、npm安装

npm install postcss-pxtorem --save

二、新建.postcssrc.js做如下修改

注：
1、以下注释代码开启后运行脚本会出现报错的提示,虽不知道有什么用,注释就好啦。

module.exports = {
     
  "plugins": {
     
  	//"postcss-import": {},
    //"postcss-url": {},
    "autoprefixer": {
     
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": {
     
      "rootValue": 32,
      "propList": ["*"]
    }
  }
}

三、新建rem.js

const baseSize = 32
// 设置 rem 函数
function setRem () {
     
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
     
  setRem()
}

三、在main.js中引入rem.js

import "./rem.js"

至此，Vant+postcss-pxtorem 实现浏览器适配就完成了。
即可直接在样式中畅快的使用px且自动转换成rem。
等等先别走！！！客官。
以为到这里就结束了吗?NO,往下看还有一份不基于postcss-pxtorem 来实现的rem适配哦。
话不多说直接上代码。

四、新建rem.js并再main.js中引入

(function (doc, win) {
     
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
     
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    if (parseInt(20 * (clientWidth / 320)) > 35) {
     
      docEl.style.fontSize = 35 + 'px'
    } else {
     
      docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'
    }
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

import "./rem.js"

五、添加样式全局变量并使用

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
$rem: (640/750)/40;
body{
     
	width: $rem * 24rem;
}

最后来复习一下：如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。