flexible.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. (function flexible (window, document) {
  2. var docEl = document.documentElement
  3. var 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. var rem = docEl.clientWidth / 10
  17. docEl.style.fontSize = rem + 'px'
  18. }
  19. setRemUnit()
  20. // reset rem unit on page resize
  21. window.addEventListener('resize', setRemUnit)
  22. window.addEventListener('pageshow', function (e) {
  23. if (e.persisted) {
  24. setRemUnit()
  25. }
  26. })
  27. // detect 0.5px supports
  28. if (dpr >= 2) {
  29. var fakeBody = document.createElement('body')
  30. var testElement = document.createElement('div')
  31. testElement.style.border = '.5px solid transparent'
  32. fakeBody.appendChild(testElement)
  33. docEl.appendChild(fakeBody)
  34. if (testElement.offsetHeight === 1) {
  35. docEl.classList.add('hairlines')
  36. }
  37. docEl.removeChild(fakeBody)
  38. }
  39. }(window, document))