0
点赞
收藏
分享

微信扫一扫

vue中的适配问题 lib-flexible

天际孤狼 2022-03-17 阅读 40

1.安装lib-flexible

yarn add lib-flexible

2.在main.js中导入

import "lib-flexible/flexible.js";

原本个文件是用来适配移动端的,所以这里需要修改一下源码


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

把540限制关掉,直接让他适配pc

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

 3.将index.html中的自适应标签注释掉,该库会自动生成

4.配置自动转换工具  px=>rem  或者使用书写代码过程中的转换插件cssrem

 我是使用的后者,效果如下:

举报

相关推荐

0 条评论