From 78329785a736707b57caae68e146afba0970ee55 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Fri, 12 Dec 2025 18:17:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(responsive):=20=E4=BC=98=E5=8C=96=E5=A4=9A?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加超小设备 (小于 480px) 的样式适配
- 完善小设备 (480px 到 768px) 的布局调整
- 新增平板设备 (769px 到 1024px) 的显示优化
- 补充大屏幕设备 (大于 1024px) 的视觉增强
- 统一各设备尺寸下的控件尺寸与间距标准
- 移除加载文字中的英文提示 (Loading Holiday Magic)
---
 christmas.html | 125 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 120 insertions(+), 5 deletions(-)

diff --git a/christmas.html b/christmas.html
index 9a6faf4..6dcde05 100644
--- a/christmas.html
+++ b/christmas.html
@@ -186,20 +186,135 @@
         }
         #audio-control:hover { background: #fceea7; color: #03050B; }
 
-        /* --- 响应式设计优化 (针对手机/平板) --- */
-        @media (max-width: 768px) {
-            h1 { font-size: 38px; letter-spacing: 4px; }
+        /* --- 响应式设计优化 (针对不同设备尺寸) --- */
+        
+        /* 超小设备 (小于 480px) */
+        @media (max-width: 479px) {
+            h1 { 
+                font-size: 28px; 
+                letter-spacing: 2px; 
+                padding: 0 10px;
+                text-align: center;
+            }
+            
+            #controls-container {
+                width: 95%;
+                padding: 12px 15px;
+                box-sizing: border-box;
+            }
+            
+            .upload-btn {
+                font-size: 11px;
+                padding: 8px 16px;
+            }
+            
+            #audio-control {
+                width: 36px;
+                height: 36px;
+                bottom: 15px; 
+                left: 15px;
+                font-size: 14px;
+            }
+            
+            .hint-text {
+                font-size: 10px;
+                letter-spacing: 0.5px;
+            }
+            
+            .gesture-guide h3 {
+                font-size: 12px;
+                margin: 10px 0 5px;
+            }
+            
+            .gesture-guide ul {
+                font-size: 10px;
+                padding-left: 12px;
+                margin: 0 0 8px;
+            }
+            
+            .controls-hint {
+                font-size: 10px;
+                left: 10%;
+                bottom: 3%;
+            }
+        }
+        
+        /* 小设备 (480px 到 768px) */
+        @media (min-width: 480px) and (max-width: 768px) {
+            h1 { 
+                font-size: 34px; 
+                letter-spacing: 3px;
+                text-align: center;
+            }
+            
             #controls-container {
                 width: 90%;
                 padding: 15px 20px;
                 box-sizing: border-box;
             }
+            
             .upload-btn {
                 font-size: 12px;
                 padding: 10px 20px;
             }
+            
             #audio-control {
-                bottom: 20px; left: 20px;
+                bottom: 20px; 
+                left: 20px;
+            }
+            
+            .controls-hint {
+                font-size: 11px;
+                left: 12%;
+            }
+        }
+        
+        /* 平板设备 (769px 到 1024px) */
+        @media (min-width: 769px) and (max-width: 1024px) {
+            h1 { 
+                font-size: 46px; 
+                letter-spacing: 5px;
+            }
+            
+            #controls-container {
+                width: 80%;
+                padding: 20px 25px;
+            }
+            
+            .upload-btn {
+                font-size: 13px;
+                padding: 12px 25px;
+            }
+            
+            .hint-text {
+                font-size: 11px;
+            }
+            
+            .gesture-guide h3 {
+                font-size: 13px;
+            }
+            
+            .gesture-guide ul {
+                font-size: 11px;
+            }
+        }
+        
+        /* 大屏幕设备 (大于 1024px) */
+        @media (min-width: 1025px) {
+            h1 { 
+                font-size: 56px; 
+                letter-spacing: 6px;
+            }
+            
+            #controls-container {
+                width: auto;
+                max-width: 500px;
+                padding: 20px 30px;
+            }
+            
+            .upload-btn {
+                font-size: 14px;
+                padding: 12px 30px;
             }
         }
 
@@ -237,7 +352,7 @@
 
 <div id="loader">
     <div class="spinner"></div>
-    <div class="loader-text">加载节日魔法中... (Loading Holiday Magic)</div>
+    <div class="loader-text">加载节日魔法中...</div>
 </div>
 
 <div id="canvas-container"></div>