vue:将px转化为rem，适配移动端vant-UI等框架(postcss-pxtorem)

Posted 2023-05-08

参考技术A 使用的是vue-cli+webpack，通过npm来安装的

在main.js中引入lib-flexible

通过meta标签，设置设备宽度以及缩放比例

一款 postcss 插件，用于将单位转化为 rem

在安装postcss-pxtorem的时候会生成一个文件.postcssrc.js
在根目录找到.postcssrc.js文件，可以在此配置的基础上根据项目需求进行修改，如：

Vue 项目中的移动端适配方案

参考技术A

工具 & 插件

配置

引入 lib-flexible 更简便的方法是直接使用阿里CDN，在模板文件 index.html 中通过script标签引入

插件

使用

这样的话这个 loader 会自动将我们写的 px 转为 rem，配合跟元素大小的随视口大小改变，可以实现移动端的适配。

总而言之，如果设计稿为 750px，那么 1vw = 7.5px，100vw = 750px。其实设计稿按照设么都没多大关系，最终转化过来的都是相对单位，我们可以使用插件帮助我们把书写的 px 转为 vw / vh。

不过，使用 vw 具有一定的缺陷：

插件

使用