H5开发类似rpx实现方法

1、postcss-px2rem-exclude（推荐） || postcss-px2rem（不推荐）；
2、rem.js

第一步：
npm install postcss-px2rem-exclude --save

//找到：postcss.config.js
//在plugins新增
'postcss-px2rem-exclude': {
      remUnit: 37.5,// 1rem等于多少px，此为转换单位（不重要）
      exclude: /node_modules|folder_name/i     //屏蔽node_modules里的css，使用postcss-px2rem不能屏蔽，所以会导致引入的一些ui变形
   }

第二步：
新建rem.js
 // 设置 rem 函数
 function setRem() {
     // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
     let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
     console.log(htmlWidth)
         //得到html的Dom元素
     let htmlDom = document.getElementsByTagName('html')[0];
     if (htmlWidth >= 450) {
         //设置根元素字体大小 ,以此控制页面元素大小程度
         htmlDom.style.fontSize = 22 + 'px';
     } else {
         //设置根元素字体大小，以此控制页面元素大小程度
         htmlDom.style.fontSize = htmlWidth / 20 + 'px';
     }

 }
 // 初始化
 setRem();
 // 改变窗口大小时重新设置 rem
 window.onresize = function() {
     setRem()
 }
根据窗口大小动态设置根元素的size；

// rem.js 第二种写法
// rem等比适配配置文件
// 基准大小
const baseSize = 14
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

man.js中引入

import './util/rem'

vue.config中配置插件

 
// 引入等比适配插件
const px2rem = require('postcss-px2rem')
 
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  // remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时，它会自动转成 (14px/14)rem
  remUnit: 14
})
 
// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true,
      },
      postcss: {
        plugins: [
          postcss,
        ],
      },
    },
  },
}

忽略的写法可以有多个文件夹：admin 和 element-ui/

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px2rem-exclude":{
      remUnit:37.5,
      exclude:/admin|element-ui/   //此目录下的文件不会被转换为rem
    }
  }
};