在项目中使用rem作为响应式页面时，如果代码以rem为单位编写，将难以判断各种具体值距离，宽度和高度，下面介绍一个插件：px2rem，使用这个插件，你仍然可以在代码中写px，启动项目会自动将px单位转换成响应式rem单位。第一步installcnpminstallpostcss-px2rempx2rem-loader--save第二步在项目src目录下新建util文件夹（已存在请忽略），并在下面新建rem.js文件util文件夹，内容如下：//rem比例适配配置文件//basesizeconstbaseSize=16//设置rem函数functionsetRem(){//当前页面宽度相对于1920宽度的缩放比例即可根据您的需要进行修改。constscale=document.documentElement.clientWidth/1920//设置页面根节点字体大小（"Math.min(scale,2)"表示最大放大倍数为2，可根据实际业务调整needs)document.documentElement.style.fontSize=baseSize*Math.min(scale,2)+'px'}//初始化setRem()//窗口大小改变时重置remwindow.onresize=function(){setRem()}第三步在项目的main.js中引入这个文件import'./util/rem'第四步在项目的根目录下新建一个vue.config.js文件（如果已经存在的话，请忽略），并在其中添加如下代码//引入比例适配插件constpx2rem=require('postcss-px2rem')//配置基础尺寸constpostcss=px2rem({//基础尺寸baseSize,需要和rem.js中一样remUnit:16})//使用比例适配插件module.exports={lintOnSave:true,css:{loaderOptions:{postcss:{plugins:[postcss]}}}}注意事项如果某行css代码想以px为单位，不想转换，有两种方法可以将PX大写。这个方案会被vscode格式化插件格式化成小写。你也可以试试。如果没有安装格式化插件，这个方案最方便。在这行css代码之后添加注释/*no*/。我亲自测试了可行的效果表明，这种方式只需要配置一次，项目的所有部分只要想用rem做响应性就可以直接写px。惊人的
