flexible.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. (function flexible (window, document) {
  2. const docEl = document.documentElement
  3. const dpr = window.devicePixelRatio || 1
  4. // adjust body font size
  5. function setBodyFontSize () {
  6. if (document.body) {
  7. document.body.style.fontSize = (12 * dpr) + 'px'
  8. }
  9. else {
  10. document.addEventListener('DOMContentLoaded', setBodyFontSize)
  11. }
  12. }
  13. setBodyFontSize();
  14. // set 1rem = viewWidth / 10
  15. function setRemUnit () {
  16. // 屏幕如果小于1024,也按照1024计算
  17. const clientWidth = document.documentElement.clientWidth
  18. if (clientWidth === undefined) {
  19. return
  20. }
  21. const rem = clientWidth / 7.5
  22. // console.log('rem', rem)
  23. // console.log('docEl', docEl)
  24. docEl.style.fontSize = rem + 'px'
  25. }
  26. setRemUnit()
  27. // reset rem unit on page resize
  28. window.addEventListener('resize', setRemUnit)
  29. window.addEventListener('pageshow', function (e) {
  30. if (e.persisted) {
  31. setRemUnit()
  32. }
  33. })
  34. // detect 0.5px supports
  35. if (dpr >= 2) {
  36. const fakeBody = document.createElement('body')
  37. const testElement = document.createElement('div')
  38. testElement.style.border = '.5px solid transparent'
  39. fakeBody.appendChild(testElement)
  40. docEl.appendChild(fakeBody)
  41. if (testElement.offsetHeight === 1) {
  42. docEl.classList.add('hairlines')
  43. }
  44. docEl.removeChild(fakeBody)
  45. }
  46. }(window, document))