解决用 lib-flexible 做移动端适配时根标签font-size上限为54px的问题

hell大家好，最近在做 移动端页面，把web页面给移动端app使用。ok首先我们做移动端页面就有一个最重要的点——移动端适配。也就是让页面自适应移动端设备屏幕大小。

我的项目呢 是  vue3+vite+vueRouter

作者使用的移动端适配方案 是用 两个插件：

1. lib-flexible

2.postcss-plugin-px2rem

lib-flexible 呢是 淘宝移动端响应式布局方案，它的作用是在页面的根标签上，根据不同的设备尺寸自动为你设置相应的 font-size。这样我们就能 通过 rem + font-size 来设计页面。

postcss-plugin-px2rem 是为了自动将项目中的 px 转为 rem，因为我们写css的时候一直写rem很累，有了这个插件，我们直接安装原型图写px就可以了，让插件帮我们自动转rem。

ok接下来我们来说遇到的问题

大家看，当我们的设备类型 为 水果14pro max 时，宽度为 430  然后 lib-flexible 为我们的根标签设置的 font-size为43px 此时是完全ok的

but，当我们的设备宽度继续变大的时候。我们会发现，如果设备宽度超过一个阈值，font-size就最大为 54px 了，仿佛呢是一个上限。

我们去看一下源码 =>

果然，不出我们所料，在node_modules 目录下的 lib-flexible插件源码里有这个函数。

函数呢根据 宽度对font-size进行了计算，但是如果宽度超过 540 就设置为了 54px。

为了实现需求，作者对源码进行了修改。也仅仅是修改了对 540 的限制

注意：个人并不建议擅自去修改源码，因为人家的东西能经受住市场的考验，是有很好的水平的。如果个人的修改不严谨，可能会造成隐藏的bug。

作者根据需要修改为了：

将设备宽度的上限进行了放宽。

接下来我们再看

font-size 已经 突破了 54px 的上限。检查页面，已经正常的通过比例响应式。

好到这里我们的文章就结束了。

如果大家有什么问题，可以发在评论区或者私信作者，作者会跟大家讨论。

不足之处敬请指正。