知识梳理
//1 onload 和 onpageshow的区别
1）参数说明
(function flexible(window, document) {
}(window, document));
//window 顶级对象
//document 下一个对象
2）代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { 200px; height: 200px; border: sienna solid 10px; } </style> </head> <body> <div></div> <script> console.log(window.devicePixelRatio); (function flexible(window, document) { //获取到根元素 html var docEl = document.documentElement; // dpr 物理像素比 // pc下是1:1 手机端是 1:2 var dpr = window.devicePixelRatio || 1; // adjust body font size //adjust 调整 适应 的意思 function setBodyFontSize() { //如果页面有body这个元素 我们设置body的字体大小 //pc端 12*1 手机端 12*2 if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { //如果没有我们就添加事件 DOMContentLoaded 让页面加载完成后再执行这个函数 设置字体 document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); //设置 1rem 大小 [最核心的功能] // set 1rem = viewWidth / 10 function setRemUnit() { var rem = docEl.clientWidth / 10; //把html的宽度 除以 平均分成10等份 docEl.style.fontSize = rem + 'px'; //设置html字体 } setRemUnit();//unit 单元的意思 // 当页面大小发生变化的时候 重新设置 // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function(e) { if (e.persisted) {//如果当前页面是从缓存中取来的 也重新计算rem的大小 setRemUnit(); } }); //resize 当调整浏览器窗口的大小时,发生 resize 事件 //onpageshow 重新加载页面时触发 和 onload事件类似 //onload 加载缓存时不触发 //有些浏览器不支持0.5px的写法 // 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)) </script> </body> </html>