vue中px自动转化为rem
在项目中是不是经常使用 rem，自动设置根节点 html 的 font-size，因为 rem 单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变 rem 的大小。但是我们常见的是 px,那有什么好的方法能自动转化为 rem 呢。答案是有的。
- vue-cli：使用脚手架工具创建项目。
- postcss-pxtorem：转换 px 为 rem 的插件。
1.创建 rem.js 文件
很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6 中每个文件都是单独的一个模块。
/***1、创建rem.js文件
**很多人写这种小工具文件会习惯性的加上闭包，这个其实是没有必要的。ES6中每个文件都是单独的一个模块。
**/
/**一般：
*移动端设计图为 750px，basesize=32,scale = document.documentElement.clientWidth / 750;
*pc端设计图为 1920px，basesize=16,scale = document.documentElement.clientWidth / 1920;
**/
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 1920;
var autoWidth = Math.round(baseSize * Math.min(scale, 2));
// 设置页面最小字体
if (autoWidth < 10) {
autoWidth = 10;
}
// 设置页面根节点字体大小
document.documentElement.style.fontSize = autoWidth + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};2.在main.js中引入rem.js
rem.js 的路径是自己定的，在哪就写那个路径。引入文件后，查看页面的 html 节点，是否有被自动添加 font-size。
import "./utils/rem";注意：完成到这一步，也就是实现了 rem 布局，实际开发的时候，还是需要我们去计算对应的 rem 值去开发。 下一步我们就配置一下 webpack，自动转换 px 为对应的 rem 值。
3.配置 postcss-pxtorem 自动转换 px 为 rem
1.安装 postcss-pxtorem
$ npm install postcss-pxtorem --save-dev
//npm install postcss-pxtorem -D2.配置文件
1>vue-cli2.x 中修改根目录 postcssrc.js 文件
在根目录找到找到postcssrc.js文件，并在其中找到 plugins 属性新增 pxtorem 的设置。
"plugins": {
"postcss-pxtorem": {
"rootValue": 32,
"unitPrecision": 2, //保留小数位
"propList": ["*"],
// 注意：如果有使用第三方UI如VUX，则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串，如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ["weui-"],//过滤的类名
"minPixelValue":2 //所有小于设置的数值都不被转换
}
}2>vue-cli3.x 和 vue-cli4.x 修改根目录 vue.config.js 文件
css: {
// css预设器配置项
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16, // 换算的基数
unitPrecision:2,//保留小数位
selectorBlackList: ['.wu'], // 忽略转换正则匹配项
propList: ['*'],
minPixelValue: 2
})
]
}
}
},####
3.重启后正常使用 px
按照上述配置项目后，即可在开发中直接使用 px 单位开发。
例如设计给出的设计图是 **750 _ 1136_，那么可以直接在页面中写
body {
width: 750px;
height: 1136px;
}将被转换为
body {
widht: 23.4375rem;
height: 35.5rem;
}注意：此方法支持**import*** 和 `.vue`单文件中`style`。暂不支持`style`中使用`@import url();*`
\\
4.vue 中 px 动转化为 rem 插件
1>三种常用的插件对比
postcss-plugin-px2rem 官方文档：https://www.npmjs.com/package/postcss-plugin-px2rem postcss-pxtorem 官方文档：https://www.npmjs.com/package/postcss-pxtorem postcss-px2rem 官方文档：https://www.npmjs.com/package/postcss-px2rem
2>安装
//安装postcss-plugin-px2rem
npm i postcss-plugin-px2rem --save-dev
//安装postcss-pxtorem
npm i postcss-pxtorem --save-dev
//安装 postcss-px2rem
npm install postcss-px2rem --save-dev####
3>配置文件
在 vue-cli3.x 中进行配置，如果个别地方不想转化 px。可以简单的使用大写的 PX 或 Px 。 postcss-plugin-px2rem 的配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
// rootValue: 100, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// unitPrecision: 5, //允许REM单位增长到的十进制数字。
/propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
// propBlackList: [], //黑名单
exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
},postcss-pxtorem 的配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({//这里是配置项，详见官方文档
rootValue : 1, // 换算的基数
selectorBlackList : ['weui','mu'], // 忽略转换正则匹配项
propList : ['*'],
}),
]
}
}
},postcss-px2rem 的配置
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-px2rem')({ //配置项，详见官方文档
remUnit: 30
}), // 换算的基数
]
}
}
},腾讯云开发者
