vue项目，移动端rem适配rem移动端适配

1、首先需要安装第三方插件，这是我们使用自动将 px 单位转化为 rem 单位的插件，命令如下：

1.  
   //可以将 px 单位自动转化为 rem 单位
2.  
   npm install postcss --save-dev 
3.  
   npm install postcss-pxtorem@5.1.1 --save-dev
4.  
    
5.  
   //还需要安装 amfe-flexible，安装引入后，单位转化才可以使用
6.  
   npm i amfe-flexible --save

       --save-dev 是安装在开发环境下，项目打包的时候 不会被打包进dist文件夹；
       --save 的意思是安装在生产环境下，项目打包的时候 会被打包进dist文件夹；

要安装这三个插件 px才能自动的转化为rem ，这些工具帮助我们自动实现移动端适配的；

2、在 main.js 中引入 amfe-flexible，如下：

1.  
   import Vant from "vant"; // 整体导入vant组件库
2.  
   import "vant/lib/index.css"; // 引入vant样式表
3.  
    
4.  
   //引入rem转化工具
5.  
   import "amfe-flexible";

3、然后在根目录下创建一个postcss.config.js文件（该文件项目启动后会自动运行），如下：

1.  
   module.exports = {
2.  
     plugins: {
3.  
       // postcss-pxtorem 插件的版本需要 >= 5.0.0
4.  
       "postcss-pxtorem": {
5.  
         rootValue({ file }) {
6.  
           // 判断是否是vant的文件，如果是就使用 37.5为根节点字体大小
7.  
           // 否则使用75 因为vant使用的设计标准为375，但是市场现在的主流设置尺寸是750
8.  
           return file.indexOf("vant") !== -1 ? 37.5 : 75;
9.  
         },
10.  
          // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
11.  
          propList: ["*"],
12.  
        },
13.  
      },
14.  
    };

配置完成后需要重新启动项目，方能生效。

这篇好文章是转载于：学新通技术网