CSS 单位转化
rem 转 rpx (或 px)
在 rem 转 rpx (或 px) 章节,我们做了 CSS
中 rem
转化成 px
/ rpx
的方式。
但是除了 rem 转 rpx (或 px),我们可能也有 px 转 rpx
的需求,这种情况实际上也很容易就能做到。
px 转 rpx
这里我们使用 postcss-pxtransform
这个 postcss
插件来做。
postcss-pxtransform
由京东团队出品,应该是目前质量最高的px
转rpx
插件,而且已经被内置在了tarojs
框架内
安装插件
- npm
- yarn
- pnpm
npm i -D postcss-pxtransform
yarn add -D postcss-pxtransform
pnpm i -D postcss-pxtransform
注册到 postcss 配置中
postcss.config.js
module.exports = {
plugins: {
'tailwindcss': {},
'autoprefixer': {},
// 下方为 px 转 rpx 区域
'postcss-pxtransform': {
platform: 'weapp',
// 根据你的设计稿宽度进行配置
// 可以传入一个 function
// designWidth (input) {
// if (input.file.replace(/\\+/g, '/').indexOf('@nutui/nutui-taro') > -1) {
// return 375
// }
// return 750
// },
designWidth: 750, // 可以设置为 375 等等来应用下方的规则,
deviceRatio: {
640: 2.34 / 2,
// 此时应用到的规则,代表 1px = 1rpx
750: 1,
828: 1.81 / 2,
// 假如你把 designWidth 设置成 375 则使用这条规则 1px = 2rpx
375: 2 / 1,
},
},
},
}