vue大屏可视化适配方案

在做web端项目的时候，ui通常给的设计稿是1920px，但是我们前端在开发时，就要考虑小屏下内容区域是否可以自适应，不出现遮挡或溢出情况。

1、下载flexible.js

npm i -S lib-flexible

2、引用

在这里需要考虑，是整个项目都需要，还是仅个别页面（如首页）需要进行大屏适配，根据项目和设计稿的具体情况考虑。

全局引入：（在main.js中引用）

局部引入：（在当前vue组件界面引用）

import 'lib-flexible/flexible.js'

3、在node_modules/lib-flexible/flexible.js中修改代码如下

设置1rem所对应的px数量，以设计稿1920px为例，将其等分成24等份，那么1rem = 80px

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        // 隐藏原本的代码
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
 
        // 最小1366px，最大适配2560px
        if (width / dpr < 1366) {
            width = 1366 * dpr;
        } else if (width / dpr > 2560) {
            width = 2560 * dpr;
        }
        // 设置成24等份，设计稿时1920px的，这样1rem就是80px
        var rem = width / 24;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

4、vs code配置 px2rem

由于上述原因，需在大屏页面中，手动将用到的px以80px = 1rem的换算形式换算成rem，为避免每次都需手动计算rem的弊端，如果使用vs code进行开发时，推荐使用px2rem插件，在输入px时自动转化为rem，提高开发效率。

打开vs code 设置，搜索rootFontSize，将默认的16px改成我们需要转化成rem的数值（以设计稿1920为例，flexible.js中80px = 1rem，那么rootFontSize应设置成80），保存后重启。

在css中输入px就可以看到如下的提示，我们选择转化后的rem就可以