rem.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. (function (designWidth, maxWidth) {
  2. var doc = document
  3. var win = window
  4. var docEl = doc.documentElement
  5. var remStyle = document.createElement('style')
  6. var tid
  7. function refreshRem () {
  8. var width = docEl.getBoundingClientRect().width
  9. maxWidth = maxWidth || 540
  10. width > maxWidth && (width = maxWidth)
  11. var rem = width * 100 / designWidth
  12. remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
  13. }
  14. if (docEl.firstElementChild) {
  15. docEl.firstElementChild.appendChild(remStyle)
  16. } else {
  17. var wrap = doc.createElement('div')
  18. wrap.appendChild(remStyle)
  19. doc.write(wrap.innerHTML)
  20. wrap = null
  21. }
  22. // 要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
  23. // refreshRem()
  24. win.addEventListener('resize', function () {
  25. clearTimeout(tid) // 防止执行两次
  26. tid = setTimeout(refreshRem, 300)
  27. }, false)
  28. win.addEventListener('pageshow', function (e) {
  29. if (e.persisted) { // 浏览器后退的时候重新计算
  30. clearTimeout(tid)
  31. tid = setTimeout(refreshRem, 300)
  32. }
  33. }, false)
  34. // if (doc.readyState === 'complete') {
  35. // doc.body.style.fontSize = '16px'
  36. // } else {
  37. // doc.addEventListener('DOMContentLoaded', function (e) {
  38. // doc.body.style.fontSize = '16px'
  39. // }, false)
  40. // }
  41. })(1920, 1920)