index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon.ico"/><title>app</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" prefetch></script><script defer="defer" src="/js/chunk-vendors-c0d76f48.3666b72a.js"></script><script defer="defer" src="/js/chunk-vendors-2aa31019.c13545ac.js"></script><script defer="defer" src="/js/chunk-vendors-0ee8b09c.7aca4476.js"></script><script defer="defer" src="/js/chunk-vendors-3e2fe043.7e8fb004.js"></script><script defer="defer" src="/js/chunk-vendors-b16c2dec.97e5bd12.js"></script><script defer="defer" src="/js/chunk-vendors-4ff468b3.0f758b01.js"></script><script defer="defer" src="/js/chunk-vendors-98185b45.680b4590.js"></script><script defer="defer" src="/js/chunk-vendors-b160bec6.10f573ea.js"></script><script defer="defer" src="/js/chunk-vendors-e24f3508.98c3e752.js"></script><script defer="defer" src="/js/chunk-vendors-cfbf2917.646264e0.js"></script><script defer="defer" src="/js/chunk-vendors-0ff46c1f.fdc72f52.js"></script><script defer="defer" src="/js/chunk-vendors-bcd1cd2e.ad4b92d1.js"></script><script defer="defer" src="/js/chunk-vendors-799ff171.ed080fcd.js"></script><script defer="defer" src="/js/chunk-vendors-b886e5fb.f2ea3bb7.js"></script><script defer="defer" src="/js/chunk-vendors-76cd72f5.92c3891c.js"></script><script defer="defer" src="/js/chunk-vendors-4a45a253.70c39115.js"></script><script defer="defer" src="/js/chunk-vendors-02ec2db9.f60e3c5f.js"></script><script defer="defer" src="/js/chunk-vendors-56d22386.1496a9fe.js"></script><script defer="defer" src="/js/chunk-vendors-53534d1f.392d012d.js"></script><script defer="defer" src="/js/chunk-vendors-8b27237c.ba07e88c.js"></script><script defer="defer" src="/js/chunk-vendors-a72f1dda.126f1d6d.js"></script><script defer="defer" src="/js/chunk-vendors-af2090be.1660d6df.js"></script><script defer="defer" src="/js/chunk-vendors-1dfd8ab8.e725da2f.js"></script><script defer="defer" src="/js/chunk-vendors-c147bf2e.b0ce9cef.js"></script><script defer="defer" src="/js/chunk-vendors-8337125e.76b541c9.js"></script><script defer="defer" src="/js/chunk-vendors-b8e726d7.d6fcbbd9.js"></script><script defer="defer" src="/js/chunk-vendors-61174297.6b670c0f.js"></script><script defer="defer" src="/js/chunk-vendors-169678f6.4fe3330e.js"></script><script defer="defer" src="/js/chunk-vendors-69403744.135b0fce.js"></script><script defer="defer" src="/js/chunk-vendors-61494d89.19af2c69.js"></script><script defer="defer" src="/js/chunk-vendors-55facd4b.24d638cc.js"></script><script defer="defer" src="/js/chunk-vendors-c81cec27.7469ea61.js"></script><script defer="defer" src="/js/chunk-vendors-25555775.f76afaa2.js"></script><script defer="defer" src="/js/chunk-vendors-b57f5fac.67e92d70.js"></script><script defer="defer" src="/js/chunk-vendors-5b6dd47c.8b805490.js"></script><script defer="defer" src="/js/chunk-vendors-193a29fb.4fd6a697.js"></script><script defer="defer" src="/js/chunk-vendors-c1e3092b.38630ce4.js"></script><script defer="defer" src="/js/chunk-vendors-439af1fa.b8ca95fa.js"></script><script defer="defer" src="/js/chunk-vendors-5c533fba.1e10778f.js"></script><script defer="defer" src="/js/chunk-vendors-5551fa64.36a1022c.js"></script><script defer="defer" src="/js/chunk-vendors-20b46649.8a80ed98.js"></script><script defer="defer" src="/js/chunk-vendors-89d5c698.11f94359.js"></script><script defer="defer" src="/js/chunk-vendors-3bad0650.2bd06a03.js"></script><script defer="defer" src="/js/chunk-vendors-5add3539.b0e8bd83.js"></script><script defer="defer" src="/js/chunk-vendors-edefa0e2.8a61e85d.js"></script><script defer="defer" src="/js/chunk-vendors-d41ecd1a.d5baa5c2.js"></script><script defer="defer" src="/js/chunk-vendors-199b0f51.c857f192.js"></script><script defer="defer" src="/js/chunk-vendors-450586c4.9448231b.js"></script><script defer="defer" src="/js/chunk-vendors-b4c87ae9.b99827db.js"></script><script defer="defer" src="/js/chunk-vendors-9a940139.e463babd.js"></script><script defer="defer" src="/js/app.0818b481.js"></script><link href="/css/app.bcaa1535.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body><script>(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 < 800 && (width = 800); //设置最小宽度
  11. width > maxWidth && (width = maxWidth);
  12. var rem = (width * 100) / designWidth; //屏幕宽度 / 设计稿宽度 * 100,若为电脑运行,此时rem=100
  13. remStyle.innerHTML = "html{font-size:" + rem + "px;}"; //此时重新定义html根元素大小为1rem,即100px
  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(
  26. "resize",
  27. function () {
  28. clearTimeout(tid); //防止执行两次
  29. tid = setTimeout(refreshRem, 300);
  30. },
  31. false
  32. );
  33. win.addEventListener(
  34. "pageshow",
  35. function (e) {
  36. if (e.persisted) {
  37. // 浏览器后退的时候重新计算
  38. clearTimeout(tid);
  39. tid = setTimeout(refreshRem, 300);
  40. }
  41. },
  42. false
  43. );
  44. if (doc.readyState === "complete") {
  45. doc.body.style.fontSize = "16px";
  46. } else {
  47. doc.addEventListener(
  48. "DOMContentLoaded",
  49. function (e) {
  50. doc.body.style.fontSize = "16px";
  51. },
  52. false
  53. );
  54. }
  55. })(1920); //此处传入设计稿宽度及最大宽度</script></html>