修改网站为响应式开发

src/app/[locale]/providers.tsx

@@ -4,6 +4,7 @@ import { NextUIProvider } from "@nextui-org/system";
 import { ThemeProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
 import { ReactNode } from "react";
+import { setHtmlFontSize } from "@/utils/index"
 
 export interface ProvidersProps {
     children: ReactNode;
@@ -13,8 +14,13 @@ export interface ProvidersProps {
 export const Providers = ({ children, themeProps }: ProvidersProps) => {
     const router = useRouter();
     return (
-        <NextUIProvider navigate={router.push}>
-            <ThemeProvider {...themeProps}>{children}</ThemeProvider>
-        </NextUIProvider>
+        <div id="app">
+            <NextUIProvider navigate={router.push}>
+                <ThemeProvider {...themeProps}>{children}</ThemeProvider>
+            </NextUIProvider>
+        </div>
     );
 };
+
+// 调用响应式方法
+setHtmlFontSize()

src/app/globals.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html, body {
+    width: 100vw;
+    height: auto;
+}
+
+#app {
+    max-width: 4.02rem;
+    width: 100vw;
+    height: auto;
+    margin: 0 auto;
+}

src/utils/index.ts

@@ -0,0 +1,16 @@
+// 设置根节点html的字体大小用于移动端适配使用
+export const setHtmlFontSize = () => {
+    (function (doc, win) {
+        var htmlDom = doc.getElementsByTagName('html')[0],
+            resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
+            recalc = function () {
+                var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
+                if (!clientWidth) return;
+                htmlDom.style.fontSize = clientWidth>=579 ? '144px' : 145 * (clientWidth / 579) + 'px';
+            };
+        if (!doc.addEventListener) return;
+        win.addEventListener(resizeEvt, recalc, false);
+        doc.addEventListener('DOMContentLoaded', recalc, false);
+        setTimeout(()=>recalc(),10)
+    })(document, window);
+}