1∶1详解淘宝flexible源码
详细解析淘宝flexible源码
首先这个功能是用来做移动端适配的,主要就是通过判断不同屏幕,将屏幕分成10等份,然后通过设置几等份,来设置像素,这个的作用就是将你写的px转换为rem。还有一点需要注意的是,这是一个立即执行函数!先科普一下立即执行函数吧:
举个例子吧:(两种方式大同小异)
引入flexible到项目中的其中两种方式:
1.<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
2.npm install lib-flexible --save
好,接下来进入主题:
(function flexible (window, document) {
var docEl = document.documentElement//获取html的根元素
var dpr = window.devicePixelRatio || 1//物理像素比(屏幕),如果没有就 当成1来用
//创建一个设置body的fontsize的函数
function setBodyFontSize () {
if (document.body) {//如果页面中有body,
document.body.style.fontSize = (12 * dpr) + 'px'//将body的fontsize设置为12乘物理像素比
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)//等页面的元素加载完之后再调用一下这个函数。因为浏览器执行代码是从上到下,当解析到script标签的时候,可能body还没构建好。所以需要考虑全面。
}
}
setBodyFontSize();//调用一下设置body的fontsize的函数
// 设置html元素的文字大小,因为rem 是相对于根节点而定的
function setRemUnit () {
var rem = docEl.clientWidth / 10//将整个屏幕划分为10等分
docEl.style.fontSize = rem + 'px'//将html元素的fontsize设置为10分之1像素
}
setRemUnit()//调用设置html的fontsize的函数
window.addEventListener('resize', setRemUnit)//resize事件是 当页面尺寸大小发生变化的时候,要重新设置rem的大小
window.addEventListener('pageshow', function (e) {//pageshow事件是 重新加载页面触发的事件
if (e.persisted) {//如果是从缓存取过来的页面也重新设置一下rem的大小(主要是火狐浏览器有往返缓存机制,这个缓存保存了DOM和JS的状态)
setRemUnit()
}
})
// 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {//如果物理像素比>=2
var fakeBody = document.createElement('body')//创建一个body节点
var testElement = document.createElement('div')//创建一个div节点
testElement.style.border = '.5px solid transparent'//将创建的div的border设置为0.5px
fakeBody.appendChild(testElement)//将创建div添加到创建的body中
docEl.appendChild(fakeBody)//将创建的body添加到html根节点中
if (testElement.offsetHeight === 1) {//如果div的高度等于1(包括了边框)
docEl.classList.add('hairlines')//就添加一个类名hairlines
}
docEl.removeChild(fakeBody)//将创建的body从html根节点中移出掉
}
}(window, document))