flexble.js自适应布局
一,flexible.js 的使用方式:
github地址:https://github.com/amfe/lib-flexible
官方文档地址:https://github.com/amfe/article/issues/17
本文中有部分内容引至上面这个文档。
(一),引用方式
1,引用cdn地址
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>
(二),flexible.js原理
在页面中引入flexible.js后,flexible会在标签上增加一个data-dpr属性和font-size样式
js首先会获取设备型号,然后根据不同设备添加不同的data-dpr值,比如说1、2或者3,从源码中我们可以看到。
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下,仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
另外,页面中的元素用rem单位来设置,rem就是相对于根元素的font-size来计算的,flexible.js能根据的font-size计算出元素的盒模型大小。这样就意味着我们只需要在根元素确定一个px字号,因此来算出各元素的宽高,从而实现屏幕的适配效果。
(三),把视觉稿中的px转换成rem
工作中我们常见的视觉稿大小大至可为640、750、1125三种。不过flexible.js并没有限制只能用这三种,所以你还可以根据自身情况来调整,具体如何转换,我们以视觉稿为640px的宽来举例子,把640px分为100份,每一份称为一个单位a,那么每个a就是6.4px,而1rem单位被认定为10a,此时,1rem=1(a)X10X6.4(px)即64px。
640px/100=6.4px 1个单位a为6.4px
1rem = 10a 1rem单位被认定为10a
1rem = 1(a)*10*6.4(px) = 64px
因此,对于视觉稿上的元素的尺寸换算,只需要原始px值除以rem基准px值(此例子中为64px)即可。例如240px * 120px的元素,最后转换为3.75rem * 1.875rem。