响应式

css/style.css

@@ -21,49 +21,33 @@ body {
     color: #fff;
     min-width: 320px;
     overflow-x: hidden;
-    /* PC端缩放相关样式 */
-    transform-origin: left top;
-    transition: transform 0.1s ease-out;
+    margin: 0;
+    padding: 0;
 }
 
 .container {
     width: 100%;
     min-height: 100vh;
+    height: auto;
+    display: flex;
     flex-direction: column;
-    justify-content: space-between;
     background: #000;
-    /* 固定最小宽度，避免缩放时内容挤压 */
-    min-width: 1200px;
 }
 
 .cont{
     width: 90%;
-    max-width: 1400px;
+    max-width: 1600px;
     margin: 0 auto;
-    padding: 0 1rem;
-    /* 确保内容区域最小宽度 */
-    min-width: 1080px;
+    padding: clamp(0.5rem, 1.5vw, 2rem);
 }
 
 /* 移动端下调整宽度 */
+/* 移动端优化 (768px及以下) */
 @media screen and (max-width: 768px) {
-    body {
-        transform: none !important;
-        width: 100% !important;
-        min-width: 320px !important;
-        height: auto !important;
-        overflow-x: hidden !important;
-    }
-
-    .container {
-        min-width: 320px;
-        width: 100%;
-    }
-
     .cont {
         width: 95%;
         max-width: 100%;
-        min-width: auto;
+        padding: 0.5rem;
     }
 }
 
@@ -641,13 +625,13 @@ body {
 
 /* 头部和尾部图片 */
 .header-image {
-    margin-bottom: 20px;
+    margin-bottom: clamp(10px, 1.5vw, 20px);
     text-align: center;
     width: 100%;
 }
 
 .footer-image {
-    margin-top: 20px;
+    margin-top: clamp(10px, 1.5vw, 20px);
     text-align: center;
     width: 100%;
 }
@@ -665,3 +649,124 @@ body {
 .ranking-item .rank-number {
     color: #000;
 }
+
+/* ========== 响应式布局 - 不同屏幕尺寸优化 ========== */
+
+/* 小屏幕笔记本 (1366x768, 1440x900) */
+@media screen and (min-width: 769px) and (max-width: 1600px) {
+    .cont {
+        width: 95%;
+        padding: clamp(0.5rem, 1.5vw, 1.5rem);
+    }
+
+    .section-title {
+        font-size: clamp(0.8rem, 1.1vw, 0.95rem);
+    }
+
+    .chart-container {
+        min-height: clamp(220px, 28vw, 280px);
+    }
+}
+
+/* 标准全高清 (1920x1080) */
+@media screen and (min-width: 1601px) and (max-width: 2100px) {
+    .cont {
+        width: 90%;
+        max-width: 1700px;
+    }
+
+    .chart-container {
+        min-height: clamp(250px, 28vw, 320px);
+    }
+}
+
+/* 2K 屏幕 (2560x1440) */
+@media screen and (min-width: 2101px) and (max-width: 3200px) {
+    .cont {
+        width: 85%;
+        max-width: 2200px;
+    }
+
+    .section-title {
+        font-size: clamp(0.9rem, 1.2vw, 1.1rem);
+        padding: clamp(6px, 0.9vw, 8px) clamp(12px, 1.6vw, 18px);
+    }
+
+    .top-data {
+        gap: clamp(10px, 1.5vw, 18px);
+        margin-bottom: clamp(15px, 1.8vw, 25px);
+    }
+
+    .chart-container {
+        min-height: clamp(280px, 28vw, 380px);
+    }
+
+    .ranking-item {
+        padding: clamp(10px, 1.3vw, 14px) clamp(12px, 1.6vw, 18px);
+        font-size: clamp(0.8rem, 1.1vw, 0.95rem);
+    }
+
+    .header-image,
+    .footer-image {
+        margin: clamp(12px, 1.8vw, 25px) auto;
+    }
+}
+
+/* 4K 屏幕 (3840x2160 及以上) */
+@media screen and (min-width: 3201px) {
+    .cont {
+        width: 80%;
+        max-width: 3000px;
+        padding: clamp(1.5rem, 2vw, 3rem);
+    }
+
+    .section-title {
+        font-size: clamp(1rem, 1.5vw, 1.3rem);
+        padding: clamp(8px, 1vw, 10px) clamp(15px, 2vw, 25px);
+    }
+
+    .top-data {
+        gap: clamp(15px, 2vw, 25px);
+        margin-bottom: clamp(20px, 2.5vw, 30px);
+    }
+
+    .sales-info {
+        padding: clamp(15px, 2vw, 25px);
+        gap: clamp(15px, 2vw, 20px);
+    }
+
+    .countdown {
+        padding: clamp(12px, 1.8vw, 15px);
+    }
+
+    .group-ranking,
+    .person-ranking {
+        padding: clamp(15px, 2vw, 30px);
+        margin-bottom: clamp(15px, 2vw, 25px);
+    }
+
+    .chart-container {
+        min-height: clamp(350px, 30vw, 500px);
+    }
+
+    .ranking-item {
+        padding: clamp(12px, 1.5vw, 18px) clamp(15px, 2vw, 22px);
+        font-size: clamp(0.85rem, 1.2vw, 1rem);
+    }
+
+    .rank-number {
+        width: clamp(22px, 3.5vw, 28px);
+        height: clamp(22px, 3.5vw, 28px);
+    }
+
+    .header-image,
+    .footer-image {
+        margin: clamp(15px, 2.5vw, 30px) auto;
+    }
+
+    /* 4K屏幕下的文字大小优化 */
+    .target-amount,
+    .total-amount {
+        font-size: clamp(1.5rem, 3vw, 2.5rem);
+    }
+}