vue设置响应式布局插件安装 lib-flexible

下载响应式插件 lib-flexible

 npm i lib-flexible -D

引用插件 在 src/main.js

import 'lib-flexible/flexible.js'

默认分辨率需要调整（默认项目配置可能不合适自己的项目， 比如大屏项目，小屏幕手机项目等，
根据实际需要修改一下，也可以不修改）
打开node_modules/lib-flexible/flexible.js
找到计算默认分辨率大小的计算位置：大概在71行这里
复制 71 - 74行并注释掉
目的是设置成最小值为400px 最大值为2560px
修改原来的代码：

         if (width / dpr < 400) {
            width = 400 * dpr;
        }else if (width / dpr > 2560) {
            width = 2560 * dpr;
        }
        // 设置成为24份
        // 正常设计稿宽度为1920 / 24 = 80， 这样刚好 就可以计算出1rem 就是80px
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;

打开浏览器检查页面，调整屏幕宽度， 就能动态的看到根节点的fontsize 是动态改变的了

利用插件动态的将px 转化成rem
csscrm -->又叫 px to rem