淘宝flexible.js源码分析
作者:互联网
淘宝flexible.js源码分析
flexible.js是基于rem最主要的布局适配
废话少说,直接上代码
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
- 首先整个flexible是一个立即执行函数
可见代码如下
(function flexible (window, document) {
...
}(window, document))
立即执行代码的格式有两种
(function(){})()
(function(){}())
淘宝flexble用的是第二种
- 第一行的docEl变量拿到的是整个html标签
der变量返回的是物理像素比,PC端的物理像素比是1,而移动端每个手机屏幕尺寸不一样,返回的值也就不同;能通过devicePixelRatio拿到就拿到,拿不到默认给1
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
设置body的字体大小
找到body,然后设置字体大小为21*物理像素比+px
if 和 else是兼容在头部引入和尾部引入都能正常跑
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
js核心把整个html的尺寸划分成十份,然后加字体大小和单位
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
当页面尺寸发生变化时重新设置rem
pageshow,重新加载页面事件,这个函数是为了防止火狐的“往返缓存”
e.persisted判断是否是页面缓存触发的事件,如果是,页面会重新加载
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
检测是否支持0.5像素,因为有些移动端不支持0.5像素的写法
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
标签:body,function,js,var,window,源码,docEl,flexible,document 来源: https://blog.csdn.net/qq_45149045/article/details/121050738