46 lines
1.2 KiB

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