postcss-px-to-viewport 适配vue 文字大小变边框不变

postcss-px-to-viewport是一个用于将像素单位转换为vw单位的PostCSS插件。根据提供的引用内容，可以看出在配置文件中设置了viewportWidth和viewportHeight来定义视口的宽度和高度，以及unitPrecision来控制REM单位的小数位数。此外，还可以使用selectorBlackList来指定需要保留为像素单位的选择器。

根据引用\[2\]中的示例代码，可以看到.test类的边框宽度是0.5像素，而字体大小是14像素。由于postcss-px-to-viewport插件的作用，这些像素值将被转换为相应的vw单位值，因此在不同的视口宽度下，边框宽度和字体大小会相应地进行缩放。

然而，根据提供的引用内容，无法确定具体的边框变化情况。如果你想要边框大小保持不变，可以将相关的选择器添加到selectorBlackList中，例如.hairlines类。这样，插件将忽略对该选择器的转换，使边框大小保持不变。

总结起来，postcss-px-to-viewport插件可以帮助你在适配Vue项目时将像素单位转换为vw单位，从而实现响应式布局。你可以通过配置文件来定义转换的规则，并使用selectorBlackList来保留特定选择器的像素单位。
#### 引用[.reference_title]
- *1* [vue中postcss+border-image解决移动端1px border粗细问题，和vw适配](https://blog.csdn.net/nlwebx_ying/article/details/106691527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [postcss-import、postcss-url、autoprefixer、postcss-cssnext、cssnano、postcss-px-to-viewport、postcss...](https://blog.csdn.net/qq_38290251/article/details/126720607)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]