flexible.js 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. // 将视口划分为24份
  16. var rem = docEl.clientWidth / 24;
  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);