vue项目中使用flexible.js和rem进行适配(适用于pc和移动)

【1】下载flexible.js

 

npm i -s lib-flexible

【2】在mainjs中引入

import 'lib-flexible/flexible.js'

【3】在nodemodule/lib-flexible/flexible.js中修改代码如下：这是按照1920px来划分的，因为分为24等份，故每份为80，故需在cssren的设置中需要将root font size改为80

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

【4】安装cssrem

在扩展设置里面把尺寸设置为80

 可以看到,输入之后会自动转换成rem,把px单位改为rem单位就能够实现适配;