flexible.js 的作用

一个终端设备适配的解决方案。可以在不同的终端设备中实现页面适配。

flexible.js 用法

在页面的中引入 flexible_css.js,flexible.js文件：
外部引用：

  1. <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  2. // js代码主要是改变了dpx和document的font-size大小。大小为docEl.getBoundingClientRect().width / 10 + 'px';

事实上 flexible.js 做了下面三件事：

  • 动态改写标签
  • 给元素添加data-dpr属性，并且动态改写data-dpr的值
  • 给元素添加font-size属性，并且动态改写font-size的值

假设移动端设计稿的宽为 750px
Flexible会将视觉稿分成100份（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。可以计算出：
1a = 7.5px
1rem = 75px
rem 相当于我们平常用的百分比，只不过 rem 是相对根元素的。而我们的根元素是根据终端屏幕大小来动态设置的，所以不管是 iphone 6 plus （尺寸为414736）还是 iphone 6 （尺寸为375667），或者是其它任何终端设备都可以很完美地还原设计稿。