Flexible.js在进行缩放的时候会改变所有字体大小吗？

Question

面试的时候面试官问到了这个问题。我回答是会的，但是面试官说这么做会很耗性能，有些不该变的也变了。我对于这种说法一知半解，求大神来指点一下，感谢！

Answer 1

很耗性能这个就不清楚了。这个库的原理其实很简单,就是把 rem 单位的尺寸和视口的宽度绑定,如果视口宽度变大,1rem 表示的实际尺寸也会增大。

Flexible.js 在进行缩放,并不是说用双指对网页进行缩放,从 @linong 的回答中可以看到是禁用了缩放的。那所谓的缩放其实指的是网页适配不同的视口宽度时产生的缩放
。
那究竟这种缩放会改变所有字体大小吗?这个问题要看你设置 font-size 大小时是否使用了 rem 单位了,如果用了 rem 单位,那么自然会跟随缩放,如果用了其他单位自然不会跟随缩放。

还有一点 flexiblejs 这个 js 库并没有把 px 的单位转换成 rem 单位的能力,具有这个能力的是 postcss 中如 px2rem 这样的插件,在这样的插件中,可以设置让转换跳过 font-size 这样的属性,如果跳过了,那自然还是使用 px 单位,这样字体就不随缩放了。

一般来说是不推荐让字体使用 rem 单位的,其实很简单,如果手机从竖屏转化为了横屏,宽度增大,那就会发现如果字体跟随缩放,那么字体会变得很大,这样会到导致看到的信息变少,可能几行字就塞满屏幕了

那么为什么现在推荐使用 vw 这些单位呢?之前已经说了这个库的原理其实很简单,就是把 rem 单位的尺寸和视口的宽度绑定,而 100vw 就是视口宽度,也就是 vw 单位就直接绑定了视口,这个库自然也没有用了。相对应的 px2rem 这样的插件也会被 px2vw 这样的插件所取代。

而对于耗性能的说法,可能你要问问面试官为何会耗性能了。因为一般对用户来说并不会经常去调整视口宽度,对于移动端来说可能还不能调节这个宽度,也就是变为单位 rem 会比 px 单位更耗性能,目前还没有听过这种说法。

Answer 2

flexible 应该是禁用缩放了吧？

--

如果觉得 resize 频繁会损耗性能，可以做去抖节流。

还不行可以做区间控制，比如说100-200都是用100

Answer 3

主要是因为 flexiblejs 这个js库把所有的 px 的单位转换成了 rem 单位，并且在不同屏幕分辨率下修改 body 中的 font-size 属性，以此来适配所有移动终端设备。

但是问题也就出现在这里了，很多不需要转换成 rem 的单位也都被转换了，所以会有很多不必要的消耗，并且在一定的场景下显示的尺寸也是不合理的，所以这个方案最后和 px2rem 方案一样被放弃了（可以在仓库 readme.md 中看到）。

现在更多的是使用 vw 、vh 这样的 视口比例的长度 👉 #视口比例的长度 | length - CSS：层叠样式表 | MDN
或者直接从自适应设计方面来解决适配问题（栅格化布局以及媒体查询），而不是使用 px2rem 这种方案一刀切的偷懒方案。

这个是从浏览器单位实现的解答。如果是从JS影响浏览器性能的解答可以参考1楼 @linong 的回答。