Vue实现PC端分辨率适配方案

一、依赖

1. 项目基础配置使用 vue-cli3 生成；
2. 自适应方案核心： 阿里可伸缩布局方案 lib-flexible；
3. px转rem：postcss-px2rem；

二、插件安装

1. 安装 lib-flexible

npm install lib-flexible

2. 安装 postcss-px2rem

npm install postcss-px2rem

三、lib-flexible配置

1. 找到node_modules下的flexible.js文件，复制到项目公共文件下
   

2. 修改flexible.js文件，如下：
   
   注：此处的处理是获取屏幕宽度，但是当屏幕宽度大于540的时候，把屏幕宽度写死了540，所以要改为正常的宽度

3. 在项目的入口文件 main.js 里引入flexible.js
   

四、postcss-px2rem配置

1. 在vue.config.js文件下配置css，如下：
   
   注：remUnit代表的是1rem = ?px，需为设计稿宽度的1/10。如设计稿是1600px ，则其值为160，即 1rem = 160px

五、重启项目，预览结果

六、注意事项

1. 行内样式，不要加像素，不会转译成rem；
2. 谷歌浏览器字体有最小号限制：12px，即使屏幕再小，字体也不能缩小了；
3. 给项目最外层设置一个通用字体大小，不要用body里的，因为不会转化成rem；
4. 若使图片等比缩放，可根据需要给图片设置宽或高；
5. 缩放是跟据横向分辨率来处理的，若有纵向的需要（如：background），可对其高度设置百分比或用vh单位；