You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
1.2 KiB

3 years ago
  1. (function(designWidth, maxWidth) {
  2. var doc = document,
  3. win = window,
  4. docEl = doc.documentElement,
  5. remStyle = document.createElement("style"),
  6. tid;
  7. function refreshRem() {
  8. var width = docEl.getBoundingClientRect().width;
  9. maxWidth = maxWidth || 540;
  10. width > maxWidth && (width = maxWidth);
  11. var rem = width * 100 / designWidth;
  12. remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  13. }
  14. if(docEl.firstElementChild) {
  15. docEl.firstElementChild.appendChild(remStyle);
  16. } else {
  17. var wrap = doc.createElement("div");
  18. wrap.appendChild(remStyle);
  19. doc.write(wrap.innerHTML);
  20. wrap = null;
  21. }
  22. //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
  23. refreshRem();
  24. win.addEventListener("resize", function() {
  25. clearTimeout(tid); //防止执行两次
  26. tid = setTimeout(refreshRem, 300);
  27. }, false);
  28. win.addEventListener("pageshow", function(e) {
  29. if(e.persisted) { // 浏览器后退的时候重新计算
  30. clearTimeout(tid);
  31. tid = setTimeout(refreshRem, 300);
  32. }
  33. }, false);
  34. if(doc.readyState === "complete") {
  35. doc.body.style.fontSize = "16px";
  36. } else {
  37. doc.addEventListener("DOMContentLoaded", function(e) {
  38. doc.body.style.fontSize = "16px";
  39. }, false);
  40. }
  41. })(375, 750);