vue项目rem适配方案 过滤vant UI

1、安装 postcss-pxtorem

yarn add postcss-pxtorem -D 

2、配置.postcssrc.js (postcssrc.config.js)

module.exports =  {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 32,   // 换算的基数(设计图750的根字体为32)
      propList: ['*'],  // 要转换的匹配项
      selectorBlackList: ['.van']  // 忽略转换
    },
  }
}

3、不同尺寸适配

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

main.js
import '@/assets/js/rem'
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容