项目中使用flexible.js和rem进行屏幕适配

689 阅读1分钟

一、安装flexible.js

cnpm i -S lib-flexible

二、main.js中引入

import 'lib-flexible/flexible.js'

三、修改基准值

注意:本例中设计稿是1920px
1、 flexible.js 把屏幕分为 24 等份

3.1修改flexible.js文件

在nodemodule/lib-flexible/flexible.js中修改代码

flexible.png

 function setRemUnit() {
    // 屏幕划分成24等分
    //所以 1rem = viewWidth/24
    var rem = docEl.clientWidth / 24;
    docEl.style.fontSize = rem + "px";
  }

3.2修改cssrem的基准值

(1)cssrem 插件的基准值是 80px

插件-配置按钮---配置扩展设置--Root Font Size 里面 设置 但是别忘记重启vscode软件保证生效

cssrem.png