Web移动端项目适配(适用于原生JavaScript,Vue,React等项目中)
下面是移动端项目适配解决方案,可以将它直接写在index.html文件中,也可以将它写在main.js中或者写在通过import引入的文件中:
(function(win) { var doc = win.document; var docEl = doc.documentElement; var tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; //比例按750设计稿 除以10 则单位 px/75 为最终结果。 //比例按750设计稿 除以7.5 则单位 px/100 为最终结果。 var rem = width / 7.5; docEl.style.fontSize = rem + 'px'; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); refreshRem(); })(window);