feat:adapted for mobile devices

public/static-home.html

@@ -171,6 +171,7 @@
             transform: translate(-50%, -50%);
             background: rgb(247, 247, 247);
             width: 30rem;
+            max-width: 85vw;
             border-radius: 1rem;
             display: none;
             opacity: 0;
@@ -225,8 +226,8 @@
             margin-bottom: 1rem;
         }
 
-        .w {
-            width: 60vw;
+        .container {
+            width: min(1200px, 92%);
         }
 
         .sky-img {
@@ -235,11 +236,33 @@
         }
 
         .card-wrap {
-            display: flex;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
             margin-bottom: 1.2rem;
             gap: 1rem;
         }
 
+        .card { width: auto; }
+
+        @media (max-width: 768px) {
+            h1 { font-size: 3rem !important; }
+            .content { margin-top: 4rem; gap: 1.4rem; }
+            .base-button { width: 100%; margin: .5rem 0; height: 2.8rem; font-size: 1rem; }
+            .base-button + .base-button{margin-left: 0;}
+            .bottom { flex-direction: column; align-items: flex-start; gap: .6rem; }
+            .sky a { width: 100% !important; }
+            .sky-img { width: 100%; }
+        }
+
+        @media (max-width: 480px) {
+            h1 { font-size: 2.4rem !important; }
+            .content { margin-top: 3.2rem; gap: 1.2rem; }
+        }
+
+
+        html, body { -webkit-tap-highlight-color: transparent; }
+        .icon { padding: .2rem; }
+
         .bottom {
             display: flex;
             gap: 1rem;
@@ -348,7 +371,7 @@
                      class="sky-img"></a>
             <span>赞助：<a href="https://skywork.ai/p/GrXQb4" class="color-blue!" target="_blank">Skywork.AI: 10 tasks in 1 hour, not 10 hours →Limited free spots: 127 left</a></span>
         </div>
-        <div class="w">
+        <div class="container">
             <div class="card-wrap">
                 <div class="card">
                     <div class="emoji">📚</div>