67 lines
1.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
(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
|
||
|
||
// var isPhone =
|
||
// /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(
|
||
// navigator.userAgent
|
||
// );
|
||
// if (isPhone) {
|
||
// alert("移动端");
|
||
// } else {
|
||
// alert("PC端");
|
||
// }
|
||
|
||
function setRemUnit() {
|
||
var rem = docEl.clientWidth / 76.8; //这里默认是10等分的，手动改为24，这个时候1rem=1920px (设计稿的宽为1920px)/24px=80px (第二点的值的由来)
|
||
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);
|