chore: 字体文件

2026-02-06 16:07:16 +08:00
parent 275ec7bb97
commit 1a7c848334
13 changed files with 830 additions and 30 deletions
--- a/src/utils/flexible.js
+++ b/src/utils/flexible.js
@@ -1,32 +1,87 @@
-import { getUniversalZoomLevel } from '@/utils/tools'
+import { getUniversalZoomLevel } from '@/utils/util'
+import MyEvent from '@/utils/myEvent'

-const maxWidth = 1920;
-const minWidth = 500;
-let flexible = (designWidth = 1920) => {
-	var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
-	function refreshRem() {
-		var width = docEl.getBoundingClientRect().width;
-		var height = docEl.getBoundingClientRect().height;
-		width = getUniversalZoomLevel() * width
-		height = getUniversalZoomLevel() * height
-		if (width > maxWidth) width = maxWidth;
-		if (width < minWidth) width = minWidth;
-		var rem = (width * 10 / designWidth).toFixed(2);
-		docEl.style.fontSize = rem + 'px'
-	}
-	//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
-	refreshRem();
-	win.addEventListener("resize", function () {
-		clearTimeout(tid); //防止执行两次
-		tid = setTimeout(refreshRem, 200);
-	}, false);
+let flexible = (designWidth, maxWidth, minWidth) => {
+  var doc = document,
+    win = window,
+    docEl = doc.documentElement,
+    remStyle = document.createElement('style'),
+    tid
+  designWidth = designWidth || 1920
+  maxWidth = maxWidth || 2560
+  minWidth = minWidth || 1024
+  let oldDesignWidth = designWidth

-	win.addEventListener("pageshow", function (e) {
-		if (e.persisted) { // 浏览器后退的时候重新计算
-			clearTimeout(tid);
-			tid = setTimeout(refreshRem, 200);
-		}
-	}, false);
-};
+  // minWidth = minWidth || 1024;
+  function refreshRem() {
+    var width = docEl.getBoundingClientRect().width
+    var height = docEl.getBoundingClientRect().height
+    width = getUniversalZoomLevel() * width
+    height = getUniversalZoomLevel() * height
+    maxWidth = maxWidth || 1920
+    if (width < 1100) {
+      document.body.classList.add('ipad')
+    } else {
+      document.body.classList.remove('ipad')
+    }
+    if (width > 768) {
+      if (width / height > 1.98) width = height * 1.98
+      width > maxWidth && (width = maxWidth)
+      width < minWidth && (width = minWidth)
+      designWidth = oldDesignWidth
+    } else {
+      designWidth = 393
+    }
+    console.log(width, designWidth)

-export default flexible
+    // var rem = width * 10 / designWidth;
+    var rem = Math.round((width * 10) / designWidth)
+    docEl.style.fontSize = rem + 'px'
+    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}'
+    MyEvent.emit('remChange', rem)
+  }
+  // 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
+    )
+  }
+}
+
+export default flexible