rem.js 2 KB
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1

var clientHeight = 0
var appFontSize = 'normalsize'

// adjust body font size
function setBodyFontSize() {
  if (document && document.body) {
    document.body.style.fontSize = (12 * dpr) + 'px'
  } else if (document) {
    document.addEventListener('DOMContentLoaded', setBodyFontSize)
  }
}
function changeRemValue(type) {
  if (type === 'small') return  0.9
  if (type === 'normalsize') return 1
  if (type === 'large') return  1.1
  if (type === 'Large') return  1.23
}

// set 1rem = viewWidth / 10
function setRemUnit(type = 'normalsize') {
  if (type !== 'normalsize' || type !== 'small' || type !== 'large' || type !== 'Large') {
    type = appFontSize || docEl.getAttribute('data-size') || 'normalsize'
  }
  // console.log(clientHeight)
  // type = 'normalsize'
  document.documentElement.setAttribute('data-size', type)
  document.documentElement.style.setProperty('--appFontSize', changeRemValue(type))

  setTimeout(() => {
    try {
      if (
        document.querySelector('.skeleton-loading').classList.contains('active') &&
        !document.querySelector('#app').classList.contains('fixed')
      ) {
        changeContentHtmlHeight()
      }
    } catch (e) {

    }
  }, 200)

  if (docEl) {
    let rem = docEl.clientWidth / 10
    if (rem > 37.5) rem = docEl.clientWidth / (10 + 1)
    if (judgTerminal() === 1) {
      const has = clientHeight ? (docEl.getBoundingClientRect().width / clientHeight) > (3 / 4) : false
      // console.info('是否是折叠屏', docEl.getBoundingClientRect().width, clientHeight, has)
      // console.info('fontSize', rem)
      docEl.style.fontSize = (has ? rem / 2 : rem) + 'px'
    } else {
      rem = 37.5
      docEl.style.fontSize = rem + 'px'
    }
  }
}

window.addEventListener('resize', () => {
  if (window.config.VUE_BASE_NODE === 'dev') {
    clientHeight = document.documentElement.getBoundingClientRect().height
  }
  setRemUnit()
})

if (judgTerminal() === 2) {
  setRemUnit()
  setBodyFontSize()
}