vue 实现自适应屏幕

1.安装自适应屏幕插件（优先使用vscode安装，需要调整px转化rem比例）

（1）安装插件：

          npm i lib-flexible --save

（2）mian.js引入：

         import 'lib-flexible/flexible.js'

2. 如果出现跑板现象，在node_modules文件夹中找到lib-flexible下面的flexible.js文件。

（1）找到下列代码注释掉：        

function refreshRem(){
   var width = docEl.getBoundingClientRect().width;
   if (width / dpr > 540) {
   width = 540 * dpr;
   }
   var rem = width / 10;
   docEl.style.fontSize = rem + 'px';
   flexible.rem = win.rem = rem;
}

（2）添加一句新的代码：

function refreshRem() {
 var rem = docEl.clientWidth / 24;
 docEl.style.fontSize = rem + 'px'
}

3. 在app.vue中的style中加入。

@media screen and (max-width: 1024px) {
  html {
   font-size: 42.66px!important;
   }
  }
  @media screen and (min-width: 2560px) {
   font-size: 106.66px!important;
   }
 }

 4.找到vscode安装插件的位置。

第二步中修改为80即可。

 

这样就实现了项目自适应屏幕的效果。