# 样式转换
# cssrem 插件
px to rem & rpx (cssrem) (opens new window)
VSCode 中单位 px 与 rem 单位之间的转换，并支持 WXSS。
安装插件成功后，设置基准字体37.5，如下
书写时候，选择自动转换的样式
# px2rem 函数
- 新建 px2rem 函数
// px转rem, 基础font-size为37.5px
@function px2rem($px, $base-px: $fs37_5) {
$base-rem: $base-px / 1rem * 1;
@if type-of($px) == 'number' {
@return $px / $base-rem;
} @else {
$rem-values: ();
@each $value in $px {
@if $value == 0 or type-of($value) == 'number' {
$rem-values: append($rem-values, $value / $base-rem);
}
}
@return $rem-values;
}
}
- 方法使用
@import '_assets/css/variable';
div {
width: px2rem(298px);
padding: px2rem(0px 15px);
}
# postcss-pxtorem
- 安装 postcss-pxtorem
npm install postcss-pxtorem -D
- 配置 postcss-pxtorem
在根目录增加postcss.config.js或.postcssrc.js文件
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 37.5, // 75表示750设计稿，37.5表示375设计稿
propList: ['*'],
unitPrecision: 5, // 保留rem小数点多少位
selectorBlackList: [/^\.van-/], // 忽略.van-开头的类名;
replace: true,
mediaQuery: false, // 允许在媒体查询中转换px
minPixelValue: 1 // 设置要替换的最小像素值
}
}
}