在项目中是不是经常使用 rem,自动设置根节点 html 的 font-size,因为 rem 单位是相对于根节点的字体大小的,所以通过设置根节点的字体大小可以动态的改变 rem 的大小。但是我们常见的是 px,那有什么好的方法能自动转化为 rem 呢。答案是有的。
很多人写这种小工具文件会习惯性的加上闭包,这个其实是没有必要的。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();
};
main.js
中引入rem.js
rem.js 的路径是自己定的,在哪就写那个路径。引入文件后,查看页面的 html 节点,是否有被自动添加 font-size
。
import "./utils/rem";
注意:完成到这一步,也就是实现了 rem 布局,实际开发的时候,还是需要我们去计算对应的 rem 值去开发。 下一步我们就配置一下 webpack,自动转换 px 为对应的 rem 值。
postcss-pxtorem
自动转换 px 为 rempostcss-pxtorem
$ npm install postcss-pxtorem --save-dev
//npm install postcss-pxtorem -D
postcssrc.js
文件在根目录找到找到postcssrc.js文件,并在其中找到
plugins
属性新增 pxtorem 的设置。
"plugins": {
"postcss-pxtorem": {
"rootValue": 32,
"unitPrecision": 2, //保留小数位
"propList": ["*"],
// 注意:如果有使用第三方UI如VUX,则需要配置下忽略选择器不转换。
// 规则是class中包含的字符串,如vux中所有的class前缀都是weui-。也可以是正则。
"selectorBlackList": ["weui-"],//过滤的类名
"minPixelValue":2 //所有小于设置的数值都不被转换
}
}
css: {
// css预设器配置项
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({
rootValue: 16, // 换算的基数
unitPrecision:2,//保留小数位
selectorBlackList: ['.wu'], // 忽略转换正则匹配项
propList: ['*'],
minPixelValue: 2
})
]
}
}
},
####
按照上述配置项目后,即可在开发中直接使用 px
单位开发。
例如设计给出的设计图是 **750 _ 1136_,那么可以直接在页面中写
body {
width: 750px;
height: 1136px;
}
将被转换为
body {
widht: 23.4375rem;
height: 35.5rem;
}
注意:此方法支持**import**
* 和 `.vue`单文件中`style`。暂不支持`style`中使用`@import url();*`
\\
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
//安装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
####
在 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
}), // 换算的基数
]
}
}
},