vue-cli3.0结合lib-flexible、px2rem--exclude，暂时解决ui库样式变小的两种方案

最新推荐文章于 2022-12-02 07:00:00 发布

易云慕

最新推荐文章于 2022-12-02 07:00:00 发布

阅读量487

点赞数

CC 4.0 BY-SA版权

分类专栏：前端适配文章标签： rem适配 vueclii3.0 flexible px2rem

本文链接：https://blog.csdn.net/qq_37012136/article/details/103498958

0 篇文章

订阅专栏

本文探讨了在移动端开发中使用lib-flexible进行rem适配时遇到的第三方UI框架尺寸问题，提出两种解决方案：一是统一使用37.5作为rem基准值，二是结合postcss-px2rem-exclude排除第三方组件转换，详细介绍了各自的优缺点。

描述

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

统一使用37.5作为rem的基准值，因为目前大部分ui框架的设计都是按照375px设计图设计的。（注意把原html的有关屏幕信息的设置注释掉，flexible会根据机型自动添加的）。
缺点：写页面的时候比较烦，毕竟之前的ui给的都是750px设计图，还得自己算。

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

安装 postcss-px2rem-exclude

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

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