[JavaScript知识库]vue设置响应式布局插件安装 lib-flexible

1. 下载响应式插件 lib-flexible

 npm i lib-flexible -D

2. 引用插件 在 src/main.js

import 'lib-flexible/flexible.js'

3. 默认分辨率需要调整（默认项目配置可能不合适自己的项目， 比如大屏项目，小屏幕手机项目等，
   根据实际需要修改一下，也可以不修改）
   打开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;

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

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

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖