postcss plugin px2rpx uni-app mpvue
npm install postcss-px2rpx-transform!Actions Release
###
PostCSS 单位转换插件,目前已支持小程序端(px 转rpx),H5 端(px 转 rem)及 RN 端。
``shell`
$ npm install postcss-px2rpx-transform --save-dev
`javascriptpostcss.config.js
module.exports = {
parser: require("postcss-comment"),
plugins: [
require("postcss-px2rpx-transform")({
platform: "weapp",
designWidth: 375
}),
]
};
`
js
options = {
platform: 'weapp',
designWidth: 750,
}
`$3
`js
options = {
platform: 'h5',
designWidth: 750,
}
`$3
`js
options = {
platform: 'rn',
designWidth: 750,
}
`$3
默认配置下,所有的 px 都会被转换。
`css
/ input /
h1 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px;
}/ weapp output /
h1 {
margin: 0 0 20rpx;
font-size: 32rpx;
line-height: 1.2;
letter-spacing: 1rpx;
}
/ h5 output /
h1 {
margin: 0 0 0.5rem;
font-size: 1rem;
line-height: 1.2;
letter-spacing: 0.025rem;
}
/ rn output /
h1 {
margin: 0 0 10px;
font-size: 16px;
line-height: 1.2;
letter-spacing: 0.5px;
}
``