vue中使用postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。 点击

下载

npm install postcss-pxtorem --save-dev

在vue.config.js中配置

 css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({rootValue :32, propList   : ['*'],minPixelValue:2,}),]}}},

参数

{rootValue: 16,unitPrecision: 5,propList: ['font', 'font-size', 'line-height', 'letter-spacing'],selectorBlackList: [],replace: true,mediaQuery: false,minPixelValue: 0,exclude: /node_modules/i
}rootValue (Number | Function)：设置根元素字体大小或根据输入参数返回根元素字体大小
unitPrecision (Number)：允许REM单位增长的十进制数字
propList (Array) ：属性的选择器，*表示通用
selectorBlackList (Array)：忽略转换正则匹配项。如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px
replace (Boolean) ：替换包含rems的规则
mediaQuery (Boolean)：允许在媒体查询中转换px
minPixelValue (Number) ：设置要替换的最小像素值
exclude (String, Regexp, Function) ：要忽略并保留为px的文件路径

进行适配

const setHtmlFontSize = () => {const htmlDom = document.getElementsByTagName('html')[0];let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;if (htmlWidth >= 750) {htmlWidth = 750;}if (htmlWidth <= 320) {htmlWidth = 320;}htmlDom.style.fontSize = `${htmlWidth / 7.5}px`;};window.onresize = setHtmlFontSize;setHtmlFontSize();