rem.js

最新推荐文章于 2024-11-12 11:19:19 发布

安静的小学生

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量62

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42811845/article/details/81904234

版权

javaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<script>
(function remSetting (win) {
  const doc = win.document
  const docEl = doc.documentElement
  let timer
  const refreshRem = function() {
    let width = docEl.getBoundingClientRect().width  
    if (width > 750) {
      width = 750
    } else if (width < 320) { 
      width = 320
    }
    const rem = width / 7.5   // width/750/100 根据实际调整
    docEl.style.fontSize = rem + 'px'
  }

  win.addEventListener('resize', () => {
    clearTimeout(timer)
    timer = setTimeout(refreshRem, 300)
  }, false)

  win.addEventListener('pageshow', (e) => {
    if (e.persisted) {
      clearTimeout(timer)
      timer = setTimeout(refreshRem, 300)
    }
  }, false)

  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = '12px'
  } else {
    doc.addEventListener('DOMContentLoaded', () => {
      doc.body.style.fontSize = '12px'
    }, false)
  }
  refreshRem()
}(window))

</script>