因为在做超市POS收银系统的时候，遇到需要适配不同的PC端的分辨率，原来PC还能做自适应的呀，感觉发现了新大路，于是打算做一下笔记。

当然我在做的过程中也借鉴了其他大佬的写的，如：

https://blog.csdn.net/weixin_41257563/article/details/97266234

1. 先下载所需要的插件

npm i lib-flexible -S
npm i px2rem-loader -D

3. 安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible

import 'lib-flexible'

5. vue-cli3配置方式：我是在vue.config.js里面做的配置，代码如下：

    config.module.rule("css").test(/\.css$/).oneOf("vue").resourceQuery(/\?vue/).use("px2rem").loader("px2rem-loader").options({remUnit: 192});},

7. 获取屏幕宽度，并修改宽度，自定设置屏幕的宽度，修改文件为：flexible.js
   路劲： node_modules/lib-flexible/flexible.js
   

打完收工