<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>新烽工程作业及监控系统</title> </head> <body> <div id="app"> <!-- <img src="./static/img/BGIMG.png" alt="" id="BGIMG"> --> </div> <!-- built files will be auto injected --> </body> <script> //author:caibaojian //website:http://caibaojian.com //weibo:http:weibo.com/kujian //兼容UC竖屏转横屏出现的BUG //自定义设计稿的宽度:designWidth //最大宽度:maxWidth //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) ; (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 > maxWidth && (width = maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'; } 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, 1920); </script> <style> html { width: 100%; height: 100%; padding: 0; margin: 0; } body { width: 100%; height: 100%; padding: 0; margin: 0; background: url("./static/img/BGIMG.png") 100% 100%; } /* #BGIMG { width: 100%; height: 100%; position: absolute; z-index: 9999; } */ </style> </html>