C端蜂鸟地图
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

51 рядки
1.8 KiB

  1. //designWidth:设计稿的实际宽度值,需要根据实际设置
  2. //maxWidth:制作稿的最大宽度值,需要根据实际设置
  3. //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
  4. (function(designWidth, maxWidth) {
  5. console.log("我执行了");
  6. var doc = document,
  7. win = window,
  8. docEl = doc.documentElement,
  9. remStyle = document.createElement("style"),
  10. tid;
  11. //浏览器竖屏与横屏转换的BUG。
  12. function refreshRem() {
  13. var width = docEl.getBoundingClientRect().width;
  14. maxWidth = maxWidth || 540;
  15. width>maxWidth && (width=maxWidth);
  16. var rem = width * 100 / designWidth;
  17. remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  18. }
  19. if (docEl.firstElementChild) {
  20. docEl.firstElementChild.appendChild(remStyle);
  21. } else {
  22. var wrap = doc.createElement("div");
  23. wrap.appendChild(remStyle);
  24. doc.write(wrap.innerHTML);
  25. wrap = null;
  26. }
  27. //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
  28. refreshRem();
  29. win.addEventListener("resize", function() {
  30. clearTimeout(tid); //防止执行两次
  31. tid = setTimeout(refreshRem, 300);
  32. }, false);
  33. win.addEventListener("pageshow", function(e) {
  34. if (e.persisted) { // 浏览器后退的时候重新计算
  35. clearTimeout(tid);
  36. tid = setTimeout(refreshRem, 300);
  37. }
  38. }, false);
  39. if (doc.readyState === "complete") {
  40. doc.body.style.fontSize = "16px";
  41. } else {
  42. doc.addEventListener("DOMContentLoaded", function(e) {
  43. doc.body.style.fontSize = "16px";
  44. }, false);
  45. }
  46. })(750, 750);