flexible.js 1.1 KB

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