|
@@ -0,0 +1,60 @@
|
|
|
+<!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-1656f0b4.508d9dc5.js"></script><script defer="defer" src="/js/chunk-vendors-3bad0650.ccf6c001.js"></script><script defer="defer" src="/js/app.99d7a86c.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) {
|
|
|
+ var doc = document,
|
|
|
+ win = window,
|
|
|
+ docEl = doc.documentElement,
|
|
|
+ remStyle = document.createElement("style"),
|
|
|
+ tid;
|
|
|
+
|
|
|
+ function refreshRem() {
|
|
|
+ var width = docEl.getBoundingClientRect().width; //屏幕宽度
|
|
|
+ maxWidth = maxWidth || 540; //设置最大宽度
|
|
|
+ width < 800 && (width = 800); //设置最小宽度
|
|
|
+ width > maxWidth && (width = maxWidth);
|
|
|
+ var rem = (width * 100) / designWidth; //屏幕宽度 / 设计稿宽度 * 100,若为电脑运行,此时rem=100
|
|
|
+ remStyle.innerHTML = "html{font-size:" + rem + "px;}"; //此时重新定义html根元素大小为1rem,即100px
|
|
|
+ }
|
|
|
+
|
|
|
+ if (docEl.firstElementChild) {
|
|
|
+ docEl.firstElementChild.appendChild(remStyle);
|
|
|
+ } else {
|
|
|
+ var wrap = doc.createElement("div");
|
|
|
+ wrap.appendChild(remStyle);
|
|
|
+ doc.write(wrap.innerHTML);
|
|
|
+ wrap = null;
|
|
|
+ }
|
|
|
+ //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
|
|
|
+ refreshRem();
|
|
|
+
|
|
|
+ win.addEventListener(
|
|
|
+ "resize",
|
|
|
+ function () {
|
|
|
+ clearTimeout(tid); //防止执行两次
|
|
|
+ tid = setTimeout(refreshRem, 300);
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+
|
|
|
+ win.addEventListener(
|
|
|
+ "pageshow",
|
|
|
+ function (e) {
|
|
|
+ if (e.persisted) {
|
|
|
+ // 浏览器后退的时候重新计算
|
|
|
+ clearTimeout(tid);
|
|
|
+ tid = setTimeout(refreshRem, 300);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+
|
|
|
+ if (doc.readyState === "complete") {
|
|
|
+ doc.body.style.fontSize = "16px";
|
|
|
+ } else {
|
|
|
+ doc.addEventListener(
|
|
|
+ "DOMContentLoaded",
|
|
|
+ function (e) {
|
|
|
+ doc.body.style.fontSize = "16px";
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })(1920); //此处传入设计稿宽度及最大宽度</script></html>
|