在平时的项目开发中，尤其是前端项目开发，经常会要求进行手机适配或者pc端分辨率的适配。目前比较常用的解决方案是使用flexible.js和rem结合解决。如下：

1.下载响应式插件

 npm i lib-flexible -D

2.在项目中引入插件，比较常见的是在vue/main.js中引入

import 'lib-flexible/flexible.js'

3.要在nodemodule/lib-flexible/flexible.js这个下载的插件中做稍微修改

通常都是按照1920px来划分的，因为分为24等份，故每份为80，故需在cssren的设置中需要将root font size改为80；

         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;

按以上步骤修改完文件之后，接下来在项目开发过程中，涉及用到单位的地方，我们使用rem作为单位。有个比较简单的方法。以我使用的Vscode编辑器为例，我们可以在编辑器中搜索一个cssrem（csscrm -->又叫 px to rem）的插件，这个插件的作用是帮我们自动将px转换为rem。特别方便。使用方式也很简单，如下：

vue项目使用flexible.js和rem适配_js

安装完以后在扩展设置里面把尺寸设置为80

vue项目使用flexible.js和rem适配_vue_02

设置完之后可以看到,输入之后会自动转换成rem,把px单位改为rem单位就能够实现适配;

vue项目使用flexible.js和rem适配_js_03

以上就是最简单的解决方案，使用起来也很方便，欢迎大家交流。