flexible.js 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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. } else {
  9. document.addEventListener("DOMContentLoaded", setBodyFontSize);
  10. }
  11. }
  12. setBodyFontSize();
  13. // set 1rem = viewWidth / 10
  14. function setRemUnit() {
  15. var rem = docEl.clientWidth / 24;
  16. docEl.style.fontSize = rem + "px";
  17. }
  18. setRemUnit();
  19. let time = true
  20. // reset rem unit on page resize
  21. window.addEventListener("resize", function() {
  22. if (!time) {
  23. return
  24. }
  25. time = false
  26. setTimeout(() => {
  27. setRemUnit();
  28. time = true
  29. }, 50)
  30. });
  31. window.addEventListener("pageshow", function(e) {
  32. if (e.persisted) {
  33. setRemUnit();
  34. }
  35. });
  36. // detect 0.5px supports
  37. if (dpr >= 2) {
  38. var fakeBody = document.createElement("body");
  39. var testElement = document.createElement("div");
  40. testElement.style.border = ".5px solid transparent";
  41. fakeBody.appendChild(testElement);
  42. docEl.appendChild(fakeBody);
  43. if (testElement.offsetHeight === 1) {
  44. docEl.classList.add("hairlines");
  45. }
  46. docEl.removeChild(fakeBody);
  47. }
  48. })(window, document);