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即可。

 

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

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐