vue 大屏自适应

最新推荐文章于 2024-08-20 13:50:22 发布

开心就好1314520

最新推荐文章于 2024-08-20 13:50:22 发布

阅读量1.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38388578/article/details/108975901

版权

1、安装lib-flexible

npm install lib-flexible --save-dev

2、在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、（node_modules/_lib-flexible@0.3.2@lib-flexible）修改flexible.js，flexible默认最大540，并分成10份(按自己需求将页面分割，我将页面分成24份，1920/24==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;
    }