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基础上/16let 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();// 改变窗口大小时重新设置 remwindow.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)remremUnit: 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
    }}
};