淘宝lib-flexible方案的原理及移动端开发中的应用

3 min read

移动端开发时淘宝的 lib-flexible 是一个适配方案,主要通过动态改变 viewport 的 meta 标签和根元素字体大小实现页面的自适应展示。

具体来说,lib-flexible 会根据设备的屏幕宽度以及设计稿的尺寸,计算出一个基准值,基准值是根据设备屏幕宽度自适应计算得出的。然后通过改变根元素 html 的 font-size 属性来控制整个页面的缩放比例,这样可以保证只需要对设计稿进行一次切图,就能在不同屏幕的设备上展示出合适的效果。

例如,如果设计稿的宽度是 750px,设备屏幕宽度是 375px,那么计算出的基准值就是 375 / 750 * 100 = 50。然后将根元素 html 的 font-size 属性设置为 50px,就可以实现页面的自适应缩放了。

lib-flexible 的原理比较简单,但使用起来非常方便,可以大大减少移动端适配的工作量。