fix(responsive): 修复中间断点布局适配

src/components/subscribe-plan-list/index.scss

@@ -729,11 +729,11 @@
   }
 }
 
-@media (max-width: 820px) {
+@media (max-width: 900px) {
   .plans {
     .plans__points-row {
-      justify-content: flex-start;
-      overflow-x: auto;
+      justify-content: center;
+      overflow-x: visible;
       padding-bottom: 2px;
     }
 
@@ -745,13 +745,17 @@
 
     .plan-grid {
       grid-template-columns: minmax(0, 1fr);
-      width: min(100%, 360px);
+      width: 100%;
       justify-content: center;
     }
 
     .plan_grid_item {
       width: 100%;
     }
+
+    .plan_item__highlight-content {
+      width: 100%;
+    }
   }
 }
 

src/hooks/useViewportScale.ts

@@ -118,7 +118,7 @@ function clearScaledElementStyles(inner: HTMLDivElement, spacer: HTMLDivElement)
 }
 
 function applyScaledElementStyles(inner: HTMLDivElement, spacer: HTMLDivElement, scale: number, viewportWidth: number, viewportHeight: number, designWidth: number, useZoom: boolean): void {
-  const scaledInnerWidth = scale > 0 ? Math.max(designWidth, viewportWidth / scale) : designWidth;
+  const scaledInnerWidth = scale > 0 ? viewportWidth / scale : designWidth;
   const scaledInnerHeight = viewportHeight > 0 && scale > 0 ? viewportHeight / scale : 0;
 
   inner.style.width = `${String(scaledInnerWidth)}px`;
@@ -184,8 +184,10 @@ export function useLayoutViewportScale(viewportRef: RefObject<HTMLElement | null
 
       const viewportWidth = measureElement?.clientWidth ?? document.documentElement.clientWidth;
       const viewportHeight = measureElement?.clientHeight ?? window.innerHeight;
-      const scale = computeLayoutViewportScale(viewportWidth, designWidth);
-      const scaling = isLayoutScalingActive(viewportWidth, scale);
+      const windowWidth = document.documentElement.clientWidth;
+      const scaleBasisWidth = windowWidth >= LAYOUT_SCALE_DISABLE_BELOW ? Math.max(viewportWidth, LAYOUT_SCALE_DISABLE_BELOW) : viewportWidth;
+      const scale = computeLayoutViewportScale(scaleBasisWidth, designWidth);
+      const scaling = isLayoutScalingActive(windowWidth, scale);
       const host = viewport ?? document.documentElement;
 
       syncHostScaleState(host, scale, scaling, useZoom);

src/layouts/Layout/Layout.scss

@@ -1279,7 +1279,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 899px) {
   .layoutShellViewport {
     height: 100dvh;
   }

src/pages/Characters/index.scss

@@ -775,6 +775,24 @@ button.character_library_sections__card {
     padding-left: 32px;
   }
 
+  .character_library_sections__grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    justify-content: stretch;
+  }
+
+  .character_library_sections__card {
+    width: 100%;
+    height: auto;
+    min-height: 248px;
+    flex-basis: auto;
+  }
+
+  .character_library_sections__card_image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+  }
+
   .character_library_sections__hero_avatars {
     right: 32px;
   }
@@ -922,6 +940,21 @@ button.character_library_sections__card {
     justify-content: stretch;
   }
 
+  .character_library_sections__card {
+    width: 100%;
+    height: auto;
+    min-height: 230px;
+    flex-basis: auto;
+    padding: 8px;
+  }
+
+  .character_library_sections__card_image {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1 / 1;
+    border-radius: 16px;
+  }
+
   .character_library_sections__category_control .categoryDropdown__trigger {
     width: 94px;
   }
@@ -944,21 +977,6 @@ button.character_library_sections__card {
     gap: 12px;
   }
 
-  .character_library_sections__card {
-    width: 100%;
-    height: auto;
-    min-height: 230px;
-    flex-basis: auto;
-    padding: 8px;
-  }
-
-  .character_library_sections__card_image {
-    width: 100%;
-    height: auto;
-    aspect-ratio: 1 / 1;
-    border-radius: 16px;
-  }
-
   .character_library_sections__card_meta {
     height: 40px;
     padding-right: 10px;

src/pages/Explore/index.scss

@@ -133,6 +133,10 @@
     padding-right: 24px;
   }
 
+  @media (max-width: 1280px) {
+    padding-left: 24px;
+  }
+
   @media (max-width: 720px) {
     padding-right: 14px;
     padding-left: 14px;