依赖包:
postcss-pxtorem
配置:
在项目根目录下创建 postcss.config.js
配置如下:
module.exports = () => ({ plugins: [ require(‘autoprefixer‘)(), // require(‘postcss-px2rem‘)({ remUnit: 75 }) require(‘postcss-pxtorem‘)({ rootValue: 37.5, propList: [‘*‘] }) ]});
rootValue
(Number)根元素字体大小。unitPrecision
(数字)允许REM单位增长的十进制数。propList
(数组)可以从px更改为rem的属性。- 值必须完全匹配。
- 使用通配符
*
启用所有属性。例:[‘*‘]
*
在单词的开头或结尾使用。([‘*position*‘]
会匹配background-position-y
)- 用于
!
与属性不匹配。例:[‘*‘, ‘!letter-spacing‘]
- 将“not”前缀与其他前缀组合在一起。例:
[‘*‘, ‘!font*‘]
selectorBlackList
(数组)要忽略的选择器并保留为px。- 如果value是string,则检查selector是否包含字符串。
[‘body‘]
会匹配.body-class
- 如果value是regexp,它会检查选择器是否与正则表达式匹配。
[/^body$/]
会匹配body
但不会.body
- 如果value是string,则检查selector是否包含字符串。
replace
(布尔值)替换包含rems的规则,而不是添加回退。mediaQuery
(布尔值)允许在媒体查询中转换px。minPixelValue
(数字)设置要替换的最小像素值。
原文地址:https://www.cnblogs.com/zhangycun/p/10762762.html
时间: 2024-09-30 06:04:32