From 1792b30163999b48886411f5e99b3bbd63f47627 Mon Sep 17 00:00:00 2001
From: icefire <1028247921@qq.com>
Date: Thu, 24 Oct 2024 10:30:14 +0800
Subject: [PATCH] =?UTF-8?q?update:=20=E6=A0=B9=E5=85=83=E7=B4=A0=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E5=A4=A7=E5=B0=8F=E6=94=B9=E4=B8=BA=E5=AA=92=E4=BD=93?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 postcss.config.mjs            |   2 +-
 src/app/components/header.tsx |  18 +++--
 src/app/globals.css           | 131 ++++++++++++++++++++++++++++++++++
 3 files changed, 140 insertions(+), 11 deletions(-)

diff --git a/postcss.config.mjs b/postcss.config.mjs
index ad4dadc..5b4f297 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -6,7 +6,7 @@ const config = {
       rootValue: 14.4, // 默认的根元素字体大小
       unitPrecision: 5, // 单位转换后保留的精度
       propList: ['*'], // 转换哪些属性，'*' 表示全部
-      selectorBlackList: [], // 不转换的类名
+      selectorBlackList: [/^body$/, /^html$/],
       minPixelValue: 0, // 小于或等于`1px`的不转换为`rem`
       mediaQuery: false, // 允许在媒体查询中转换`px`
     }
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 8a3d83b..ebc1c33 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -17,15 +17,13 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
   const [show, setShow] = useState(false)
   const [hash, setHash] = useState('#home')
   useEffect(() => {
-    const designWidth = 1440;
-    const deviceWidth = document.documentElement.clientWidth
-    let scale = 1
-    console.log('designWidth', deviceWidth)
-    if (deviceWidth <= 1440) {
-      scale = deviceWidth / designWidth;
-    }
-    console.log('scale', scale)
-    document.documentElement.style.fontSize = `${scale * 14.4}px`;
+    // const designWidth = 1440;
+    // const deviceWidth = document.documentElement.clientWidth
+    // let scale = 1
+    // if (deviceWidth <= 1440) {
+    //   scale = deviceWidth / designWidth;
+    // }
+    // document.documentElement.style.fontSize = `${scale * 14.4}px`;
     switch (hash) {
       case '#home':
         const home = document.getElementById('home')
@@ -96,7 +94,7 @@ export default function Header(props: { dict: Record<string, string>, lang: stri
       >
         {
           navList.map((item: NavType) => (
-            <div onClick={() => setHash(item.href)} key={item.name}>
+            <div onClick={() => setHash(item.href)} key={item.name} className="menu-item">
               <div className="text-center cursor-pointer" onClick={() => setActiveTab(item.name)}>
                 <div className="my-[10px] w-[144px] text-[18px]">{item.name}</div>
                 {
diff --git a/src/app/globals.css b/src/app/globals.css
index c5e15c6..22e87d7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,4 +10,135 @@
         -ms-overflow-style: none;
         scrollbar-width: none;
       }
+  html {
+    font-size: 14.4px;
+  }
+  .menu-item {
+    display: block;
+  }
+  @media (min-width: 300px) and (max-width: 350px) {
+    html {
+      font-size: 3px;
+    }
+  }
+  @media (min-width: 350px) and (max-width: 400px) {
+    html {
+      font-size: 3.5px;
+    }
+  }
+  @media (min-width: 400px) and (max-width: 450px) {
+    html {
+      font-size: 4px;
+    }
+  }
+  @media (min-width: 450px) and (max-width: 500px) {
+    html {
+      font-size: 4.5px;
+    }
+  }
+  @media (min-width: 500px) and (max-width: 550px) {
+    html {
+      font-size: 5px;
+    }
+  }
+  @media (min-width: 550px) and (max-width: 600px) {
+    html {
+      font-size: 5.5px;
+    }
+  }
+  @media (min-width: 600px) and (max-width: 650px) {
+    html {
+      font-size: 6px;
+    }
+  }
+  @media (min-width: 650px) and (max-width: 700px) {
+    html {
+      font-size: 6.5px;
+    }
+  }
+  @media (min-width: 700px) and (max-width: 750px) {
+    html {
+      font-size: 7px;
+    }
+  }
+  @media (min-width: 750px) and (max-width: 800px) {
+    html {
+      font-size: 7.6px;
+    }
+  }
+  @media (min-width: 800px) and (max-width: 850px) {
+    html {
+      font-size: 8px;
+    }
+  }
+  @media (min-width: 850px) and (max-width: 900px) {
+    html {
+      font-size: 8.5px;
+    }
+  }
+  @media (min-width: 900px) and (max-width: 950px) {
+    html {
+      font-size: 9px;
+    }
+  }
+  @media (min-width: 1000px) and (max-width: 1050px) {
+    html {
+      font-size: 10px;
+    }
+  }
+  @media (min-width: 1050px) and (max-width: 1100px) {
+    html {
+      font-size: 10.5px;
+    }
+  }
+  @media (min-width: 1100px) and (max-width: 1150px) {
+    html {
+      font-size: 11px;
+    }
+  }
+  @media (min-width: 1150px) and (max-width: 1200px) {
+    html {
+      font-size: 11.5px;
+    }
+  }
+  @media (min-width: 1200px) and (max-width: 1250px) {
+    html {
+      font-size: 12px;
+    }
+  }
+  @media (min-width: 1250px) and (max-width: 1300px) {
+    html {
+      font-size: 12.5px;
+    }
+  }
+  @media (min-width: 1300px) and (max-width: 1350px) {
+    html {
+      font-size: 13px;
+    }
+  }
+  @media (min-width: 1350px) and (max-width: 1400px) {
+    html {
+      font-size: 13.5px;
+    }
+  }
+  @media (min-width: 1400px) and (max-width: 1450px) {
+    html {
+      font-size: 14px;
+    }
+  }
+  @media (min-width: 1440px) {
+    html {
+      font-size: 14.4px;
+    }
+  }
+  @media (max-width: 1440px) {
+    .menu-item {
+      display: none;
+    }
+  }
+  @media (min-width: 1440px) {
+    .menu-item {
+      display: block;
+    }
+  }
     
\ No newline at end of file