Merge pull request #45 from Maa-NTE/fix/csswidth-blade

fix(css) : 修复页面在移动端超出屏幕问题

Author: Hollow-YK

docs/.vuepress/components/HHero.vue

@@ -102,12 +102,13 @@ const actions = computed<HeroAction[]>(() => heroData.value.actions ?? [])
 }
 
 .hero-content {
-  width: max-content;
+  width: 100%;
   max-width: 960px;
   padding: 0 20px;
   margin: 0 auto;
   text-align: center;
   pointer-events: none;
+  box-sizing: border-box;
 }
 
 .hhero.full .hero-container .hero-content {
@@ -158,6 +159,25 @@ const actions = computed<HeroAction[]>(() => heroData.value.actions ?? [])
   pointer-events: auto;
 }
 
+@media (max-width: 480px) {
+  .hero-name,
+  .hero-tagline {
+    font-size: 32px;
+    line-height: 1.2;
+    overflow-wrap: break-word;
+  }
+
+  .hero-text {
+    font-size: 15px;
+    overflow-wrap: break-word;
+  }
+
+  .actions {
+    gap: 10px 16px;
+    margin-top: 22px;
+  }
+}
+
 @media (min-width: 768px) {
   .hero-name,
   .hero-tagline {

docs/.vuepress/components/HomeIntro.vue

@@ -66,8 +66,10 @@ defineProps<{
   font-size: 36px;
   font-weight: 700;
   width: fit-content;
+  max-width: 100%;
   margin: 0 0 16px;
   padding: 5px;
+  overflow-wrap: break-word;
   background: var(--vp-bg-home-hero-name, linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%));
   background-clip: text;
   -webkit-background-clip: text;
@@ -93,4 +95,15 @@ defineProps<{
   font-weight: 500;
   text-decoration: none;
 }
+
+@media (max-width: 480px) {
+  .home-intro-title {
+    font-size: 26px;
+  }
+
+  .home-intro-text {
+    font-size: 15px;
+    padding: 0 5px;
+  }
+}
 </style>

docs/.vuepress/styles/custom.css

@@ -10,6 +10,22 @@
   margin-top: 10vh;
 }
 
+/* 全局：防止移动端横向溢出 */
+html,
+body {
+  overflow-x: hidden;
+}
+
+/* 图片等标签调整 */
+img,
+video,
+iframe,
+table,
+pre,
+code {
+  max-width: 100%;
+}
+
 /* 语言切换和外观切换按钮在 1024px+ 时直接显示（原为 1280px+） */
 /* 避免在中等屏宽下被收入 "..." 菜单中导致不可见 */
 @media (min-width: 1024px) {