(function flexible(window, document) { const docEl = document.documentElement; // const dpr = window.devicePixelRatio || 1; const dpr = 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); const browser = { versions: (function () { const u = navigator.userAgent; // const app = navigator.appVersion; return { trident: u.includes("Trident") > -1, presto: u.includes("Presto") > -1, webkit: u.includes("AppleWebkit") > -1, gecko: u.includes("Gecko") > -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/), ios: !!u.match(/\(i[^;]+;(U;)? CPU.+Mac OS X/), android: u.includes("Android") > -1, iPhone: u.includes("iPhone") > -1, iPad: u.includes("iPad") > -1, }; })(), }; function refreshRem() { let width = docEl.getBoundingClientRect().width; if (!browser.versions.mobile) { if (width > 1920) { width = 1920; } else if (width < 1200) { width = 1200; } } if (width / dpr > 540) { width = width * dpr; } let rem; // console.log(browser.versions.mobile); if (browser.versions.mobile) { rem = width / 7.5; } else { // >1600 rem = width / 19.2; } docEl.style.fontSize = rem + "px"; flexible.rem = window.rem = rem; } refreshRem(); // 由于我们设计稿pc宽度为1920,移动端宽度为750,所以在使得100px=1rem的基准下,分别使得当前width/19.2和width/7.5。 // // set 1rem = viewWidth / 10 // function setRemUnit() { // const rem = docEl.clientWidth / 10; // docEl.style.fontSize = rem + "px"; // } // setRemUnit(); // reset rem unit on page resize window.addEventListener("resize", refreshRem); window.addEventListener("pageshow", function (e) { if (e.persisted) { refreshRem(); } }); // detect 0.5px supports if (dpr >= 2) { const fakeBody = document.createElement("body"); const 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);