flexible总的思想就是利用动态设置根元素(html标签)的font-size大小,来动态改变css3中rem这个单位中对应px的大小。
因为html的font-size默认为16px,所以,1rem就默认为16px。
flexible的思想是把整个视图宽度区域分为10份,每一份为一个1rem,总的就是10rem。例如375px的宽度,那么1rem就是37.5px,因此设置根元素的font-size为37.5px。
//flexible.js源码如下;
(function flexible(window,document){//首先是一个立即执行函数,执行的时候传入参数window,document
var docEl = document.documentElement //返回文档的root元素,即根元素html
var dpr = window.devicePixelRatio || 1 //获取设备的dpr,即当前设置下物理像素与虚拟像素的比值
//调整body标签的fontSize
//设置默认字体的大小,默认字体的大小继承自body
function setBodyFontSize(){
if(document.body){
document.body.style.fontSize = (12 * dpr) + 'px'
}else {
document.addEventListener('DOMContentLoaded',setBodyFontSize)
}
}
setBodyFontSize();
//设置 1rem = viewWidth / 10
function setRemUnit(){
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
//在页面resize或者pageshow重新设置rem
window.addEventListener('resize',setRemUnit)
window.addEventListener('pageshow',function(e){
if(e.persisted){//某些浏览器,重新展示页面时,走的是页面展示缓存
setRemUnit();
}
})
//检测0.5px的支持,支持则root元素的class有hairlines
//解决1px在高清屏多像素问题
if(dpr>= 2){
var fakeBody = document.createElement('doby');
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))