From a13dcf40353d301b063c3c9d2ed042e28b8c4bc3 Mon Sep 17 00:00:00 2001
From: meetqy <meetqy@qq.com>
Date: Wed, 21 Jun 2023 16:23:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Web=20375px=20=E4=B8=80?=
 =?UTF-8?q?=E4=B8=8B=E5=B1=8F=E5=B9=95=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #271
---
 apps/nextjs/src/pages/_app.tsx  |  3 ++-
 apps/nextjs/src/utils/common.ts | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/pages/_app.tsx b/apps/nextjs/src/pages/_app.tsx
index 42611f16..fc429426 100644
--- a/apps/nextjs/src/pages/_app.tsx
+++ b/apps/nextjs/src/pages/_app.tsx
@@ -8,7 +8,8 @@ import { QueryParamProvider } from "use-query-params";
 import { trpc } from "~/utils/trpc";
 
 configResponsive({
-  sm: 0,
+  xs: 0,
+  sm: 376,
   md: 641,
   lg: 769,
   xl: 1025,
diff --git a/apps/nextjs/src/utils/common.ts b/apps/nextjs/src/utils/common.ts
index cb9e6ee8..6e6a2a1b 100644
--- a/apps/nextjs/src/utils/common.ts
+++ b/apps/nextjs/src/utils/common.ts
@@ -37,8 +37,19 @@ export const getGridOption = (responsive: { [key in string]: boolean }) => {
   };
 };
 
+/**
+ * {screen: [列表可以切换的列数和 GridScreensConfig 对应]}
+ *
+ * @ps 当前设备 iphone SE width:375px 匹配 xs，切换列数为 grid-cols-1 和 grid-cols-2
+ *     当切换到 1，也就是 index=1
+ *
+ * @result GridScreens[xs][1] => grid-cols-1
+ *         GridScreensConfig[xs][1] => { body: true, gap: "gap-4", p: "p-4" }
+ * */
 export const GridScreens = {
-  // 0-640: sm
+  // 0-375: xs
+  xs: ["grid-cols-1", "grid-cols-2"],
+  // 376-640: sm
   sm: ["grid-cols-1", "grid-cols-2", "grid-cols-3"],
   // 641-768: md
   md: ["grid-cols-3", "grid-cols-2", "grid-cols-1"],
@@ -76,4 +87,8 @@ export const GridScreensConfig: Record<string, Record<string, { body: boolean; g
     "2": { body: true, gap: "gap-3", p: "p-2" },
     "3": { body: false, gap: "gap-2", p: "p-2" },
   },
+  xs: {
+    "1": { body: true, gap: "gap-4", p: "p-4" },
+    "2": { body: false, gap: "gap-3", p: "p-2" },
+  },
 };