postcss-pxtorem设置不转换UI框架的CSS单位问题
更新时间：2024年07月25日 09:19:07 作者：一捆铁树枝
这篇文章主要介绍了postcss-pxtorem设置不转换UI框架的CSS单位问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
postcss-pxtorem设置不转换UI框架的CSS单位
在移动端项目中使用postcss-pxtorem做适配，同时也使用到了第三方UI库（vant）。
这时就出现了一个问题。
第三方UI库使用的是px，而postcss将页面中的px 全部转化成了rem.导致样式缩小。
查询postcss配置文档后发现 其提供了selectorBlackList 属性来忽略掉某些选择器，vant-UI组件库的CSS都是以.van开头的 因此我只需要将 .van 忽略掉就好
具体配置如下：
module.exports = {
plugins: {
// 这个工具可以实现自动添加CSS3前缀
"autoprefixer": {
overrideBrowserslist: ['last 5 version', '>1%', 'ie >=8']
},
//如果你使用rem来实现移动端多设备适配，这个工具可以把px转换为rem
"postcss-pxtorem": {
rootValue: 100, // 指定转换倍率，我现在设置这个表示1rem=100px;
minPixelValue: 1, // 需要转换的最小值，一般1px像素不转换，以上才转换
unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
selectorBlackList: ['.van'], // 匹配不被转换为rem的选择器
propList: ['*'], // 属性列表，表示你要把哪些css属性的px转换成rem，这个*表示所有
replace: true, // 替换包含rem的规则，而不是添加回退
mediaQuery: false // 允许在媒体查询中转换px
}
}
}postcss-pxtorem px不转换为rem的做法
有些场景是不要px转为rem的时候，如果不想设置vscode的vetur的设置，当然也不建议设置，除非团队每个人都设置，要不然就会被保存格式化，PX都会转为px
所以采用如下做法：
postCssPxToRem({
// 自适应，px>rem转换
rootValue: 192, // 根据设计图尺寸写，设计图是 1920，就写 192
propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
selectorBlackList: ['-nopx'], // 过滤掉-nopx结尾的class，不进行rem转换
}),实际代码设置如下：
<div id="lightEchart-nopx"></div>
效果如图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍了基于Vue和iView的文件分片上传技术,通过将文件拆分成多个小块并逐块上传,解决了大文件上传时的诸多问题,如上传速度慢、超时和网络中断等,它还展示了如何实现分片上传的进度显示、错误处理和断点续传等功能,感兴趣的朋友跟随小编一起看看吧2025-01-01
本文主要介绍了vue项目多租户环境变量的设置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了Vue如何使用vue-pdf实现PDF文件预览的功能，文中的示例代码讲解详细，具有一定的参考价值，感兴趣的可以了解一下2023-03-03
这篇文章主要介绍了Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
这篇文章主要介绍了vue router 配置路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了Vue中使用wangeditor富文本编辑的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
弹窗经常被使用在一些表单的增删改查啊,或者弹出一些提示信息等等,这篇文章主要给大家介绍了关于Vue Dialog弹窗诟病解决的相关资料,需要的朋友可以参考下2023-01-01
提起帮助文档，想必大家都会想到 VuePress等。但是VuePress是“静态网站生成器”，需要我们自行编写文档，然后交给VuePress变成网站。因此，本文将用vite2+Vue3编写一个在线帮助文档工具，需要的可以参考一下2022-03-03
插件功能开发完成后，若需要发布到公共组件库中（例如：npmjs），需要对插件进行打包并发布，这篇文章主要介绍了Vue插件打包与发布的方法示例，感兴趣的小伙伴们可以参考一下2018-08-08
最新评论