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>
效果如图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了antd实现table组件选中单行换样式(比如背景颜色),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下2024-06-06
图文详解Element-UI中自定义修改el-table样式
elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下2022-08-08
在Vue3项目中,使用i18n动态获取keyzh文件时,直接用中括号无效,需改用数组形式如$[key, 'zh'],明确指定语言代码以正确加载翻译2025-09-09
这篇文章主要介绍了Vue中$emit调用父组件异步方法模拟.then实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法
这篇文章主要介绍了vue2前端使用axios发起post请求后端(springboot)接收不到值解决办法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue全局混入之状态判断是否执行点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在做 Vue 项目的时候,大家是不是经常遇到这样的需求,点一下复制按钮,把这行表格数据复制一份放在下方,除了附件字段之外其他都保留,所以本文我们就来看看如何优雅地复制一行带附件的数据,不破坏原始数据结构吧2025-09-09
这篇文章主要介绍了关于json-bigint处理大数字问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
在Web应用程序中，表单验证码和滑动验证是常见的安全机制，用于防止恶意攻击和机器人攻击，本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下2023-06-06
最新评论