描述

有关于使用lib-flexible的rem适配移动端的方案，我们都会遇到第三方ui框架会变小问题。网上找了很多方案，发现其实没有一个完美的解决方法，这里我总结了两种方案，以供参考。如果有更好的方案，欢迎指导

第一种

统一使用37.5作为rem的基准值，因为目前大部分ui框架的设计都是按照375px设计图设计的。（注意把原html的有关屏幕信息的设置注释掉，flexible会根据机型自动添加的）。

缺点：写页面的时候比较烦，毕竟之前的ui给的都是750px设计图，还得自己算。

第二种

rem的基准值随意设置，不过现在一般都是75，因为ui设计图现在基本给的都是750px，比较好开发。这时候就要用到postcss-px2rem-exclude中的exclude的功能了，使用这个属性设置可以让第三方ui组件不进行rem转化。具体使用方法如下

1. 安装 postcss-px2rem-exclude

   yarn add postcss-px2rem-exclude -D
   或npm i postcss-px2rem-exclude -D
   

2. 在package.json同级目录下新建postcss.config.js文件配置（自动生成的话直接使用即可），在plugin中添加以下代码

   'postcss-px2rem-exclude': {
     remUnit: 75,//rem基准值
     exclude: /node_modules/i //正则表达式过滤符合匹配项的文件
   }
   

整个文件内容如下



3.在html文件的head中添加这段代码

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

这段代码的作用是把flexible依赖的drp设置为固定的1，即使在iphone6的@2倍屏幕下也是1，以及iPhoneX的@3倍屏幕也是1。

缺点：这样做应该会影响到页面的分辨率，在真机上部分图片会不清晰，不是一个高新高清的页面。