88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
import { getUniversalZoomLevel } from '@/utils/util'
|
||
import MyEvent from '@/utils/myEvent'
|
||
|
||
let flexible = (designWidth, maxWidth, minWidth) => {
|
||
var doc = document,
|
||
win = window,
|
||
docEl = doc.documentElement,
|
||
remStyle = document.createElement('style'),
|
||
tid
|
||
designWidth = designWidth || 1920
|
||
maxWidth = maxWidth || 2560
|
||
minWidth = minWidth || 1024
|
||
let oldDesignWidth = designWidth
|
||
|
||
// minWidth = minWidth || 1024;
|
||
function refreshRem() {
|
||
var width = docEl.getBoundingClientRect().width
|
||
var height = docEl.getBoundingClientRect().height
|
||
width = getUniversalZoomLevel() * width
|
||
height = getUniversalZoomLevel() * height
|
||
maxWidth = maxWidth || 1920
|
||
if (width < 1100) {
|
||
document.body.classList.add('ipad')
|
||
} else {
|
||
document.body.classList.remove('ipad')
|
||
}
|
||
if (width > 768) {
|
||
if (width / height > 1.98) width = height * 1.98
|
||
width > maxWidth && (width = maxWidth)
|
||
width < minWidth && (width = minWidth)
|
||
designWidth = oldDesignWidth
|
||
} else {
|
||
designWidth = 750
|
||
}
|
||
console.log(width, designWidth)
|
||
|
||
// var rem = width * 10 / designWidth;
|
||
var rem = Math.round((width * 10) / designWidth)
|
||
docEl.style.fontSize = rem + 'px'
|
||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
|
||
MyEvent.emit('remChange', rem)
|
||
}
|
||
// if (docEl.firstElementChild) {
|
||
// docEl.firstElementChild.appendChild(remStyle);
|
||
// } else {
|
||
// var wrap = doc.createElement("div");
|
||
// wrap.appendChild(remStyle);
|
||
// doc.write(wrap.innerHTML);
|
||
// wrap = null;
|
||
// }
|
||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||
refreshRem()
|
||
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
|
||
)
|
||
|
||
if (doc.readyState === 'complete') {
|
||
doc.body.style.fontSize = '16px'
|
||
} else {
|
||
doc.addEventListener(
|
||
'DOMContentLoaded',
|
||
function (e) {
|
||
doc.body.style.fontSize = '16px'
|
||
},
|
||
false
|
||
)
|
||
}
|
||
}
|
||
|
||
export default flexible
|