我看了下官方文档,配置mainfest.json可以解决这个问题,但是仍然不满足需求,如果我不想某一处转换,比如像h5那样,可以设置大写的PX不转换,或者忽略指定目录的转换,没有这些配置,毕竟不是每一处都需要转换.,比如1px细线,就不能转换
当然,我也可以继续用rpx,之所以用px,也是考虑到平台迁移,万一哪天项目要迁移怎么处理呢?
2***@qq.com
- 发布：2020-09-16 10:51
- 更新：2021-06-09 14:50
- 阅读：7574
uniapp中怎么转换px为rpx?
分类：uni-app
可以通过这个进行转换
npm i postcss-pxtorpx-pro -S
配置
postcss.config.js
const path = require('path')
module.exports = {
parser: require('postcss-comment'),
plugins: [
require('postcss-pxtorpx-pro')({
// 转化的单位
unit: 'rpx',
// 单位精度
unitPrecision: 5,
// 不需要处理的css选择器
selectorBlackList: [],
// 不需要转化的css属性
propBlackList: [],
// 直接修改px，还是新加一条css规则
replace: true,
// 是否匹配媒介查询的px
mediaQuery: false,
// 需要转化的最小的pixel值，低于该值的px单位不做转化
minPixelValue: 0,
// 不处理的文件
exclude: /node_modules|components/ig,
// 转化函数
// 默认设计稿按照750宽，2倍图的出
transform: (x) => x
}),
require('postcss-import')({
resolve(id, basedir, importOptions) {
console.log("postcss-import", id, importOptions)
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
感兴趣可以看我的简书
uniapp基础架构地址及使用文档
https://www.jianshu.com/p/7bb900f28303
然后页面直接写px就行
注：如果是原生的页面目前不生效
