Flexible.js在进行缩放的时候会改变所有字体大小吗?
面试的时候面试官问到了这个问题。我回答是会的,但是面试官说这么做会很耗性能,有些不该变的也变了。我对于这种说法一知半解,求大神来指点一下,感谢!

很耗性能这个就不清楚了。这个库的原理其实很简单,就是把 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 单位更耗性能,目前还没有听过这种说法。

- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容