12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!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.0" />
- <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
- <title>
- <%= htmlWebpackPlugin.options.title %>
- </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>
- </head>
- <body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
|