From 6ec296bafa0e7fa1cf43667d95fea55e09f9d090 Mon Sep 17 00:00:00 2001 From: chenshengle <954534408@qq.com> Date: Tue, 24 Aug 2021 16:19:41 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 200 ++++++++++++++++++---------------------------- js/flexible.js | 51 ++++++++++++ style/fengmap.css | 9 +++ 3 files changed, 138 insertions(+), 122 deletions(-) create mode 100644 js/flexible.js diff --git a/index.html b/index.html index 6e92fd8..fa5354d 100644 --- a/index.html +++ b/index.html @@ -5,146 +5,102 @@ 地图 + - +
+ \ No newline at end of file diff --git a/js/flexible.js b/js/flexible.js new file mode 100644 index 0000000..095e952 --- /dev/null +++ b/js/flexible.js @@ -0,0 +1,51 @@ +//designWidth:设计稿的实际宽度值,需要根据实际设置 +//maxWidth:制作稿的最大宽度值,需要根据实际设置 +//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750) +(function(designWidth, maxWidth) { + console.log("我执行了"); + + var doc = document, + win = window, + docEl = doc.documentElement, + remStyle = document.createElement("style"), + tid; + //浏览器竖屏与横屏转换的BUG。 + 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); + } +})(750, 750); \ No newline at end of file diff --git a/style/fengmap.css b/style/fengmap.css index 72985ea..cfec7f3 100644 --- a/style/fengmap.css +++ b/style/fengmap.css @@ -122,3 +122,12 @@ body, left: 80px; bottom: -39px; } +.aabb{ + width: 300px; + height: 300px; + background-color: #337ab7; + z-index: 1000000000000; + position:fixed; + top: 0; + left: 0; +} \ No newline at end of file