vite 适配 lib-flexible+postcss-pxtorem

vite 适配 lib-flexible+postcss-pxtorem

1 npm 安装：
npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev
2 ，在src下创建utils文件夹，文件夹下创建rem.js

rem.js文件

// 设置基础根文件大小
let baseSize = 192
// rem 函数
function setRem () {
  // 设计稿一般都是以375的宽度
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 调用方法
setRem()
// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {
  setRem()
}

3,在min.js 引入rem.js

import './utils/rem'

4，在根目录下创建 postcss.config.cjs

module.exports = {
    plugins: {
      'postcss-pxtorem': {
        rootValue: 192,
        // 根字体大小是 37.5
        propList: ['*'],
       /// selectorBlackList: ['.no__rem']
        // 过滤掉.no__rem-开头的class，不进行rem转换处理
      }
    }
  }
 
  

5，重新启动项目就可以直接把px改为rem