响应式适配: 手机/iPad竖屏可操作

StudyMode.css:
- 768px以下学习卡片改 flex-direction column，思维导图在上、词汇信息在下
- 字号、padding、按钮尺寸缩小
- 闪记/抄写输入框 width 100% 自适应，避免横向溢出
- 480px以下进一步压缩

TestMode.css:
- 768px以下反馈区改 flex-direction column，思维导图与输入框上下结构
- 答题输入行改纵向，输入框 width 100% 自适应
- 抄写输入框宽度自适应
- 字号、padding 全面缩小
- 480px以下进一步压缩

diff --git a/frontend/src/components/StudyMode.css b/frontend/src/components/StudyMode.css
index 5e03a461fdcc939d27444d3e33ed2c01262fe638..a1404b619e02abf93ccd47062f08671d2ee2e016 100644 (file)
--- a/frontend/src/components/StudyMode.css
+++ b/frontend/src/components/StudyMode.css
@@ -169,3 +169,85 @@ input:focus {
     margin-top: 100px;
     color: #64748b;
 }
+
+/* ====================== 响应式适配 ====================== */
+/* 平板竖屏及以下：图片与内容改为上下结构 */
+@media (max-width: 768px) {
+    .study-container {
+        padding: 10px;
+    }
+
+    .study-card {
+        flex-direction: column;       /* 改为上下结构 */
+        min-height: auto;             /* 高度自适应 */
+        width: 100%;
+    }
+
+    .image-section {
+        border-right: none;
+        border-bottom: 1px solid #eee;
+        padding: 10px;
+    }
+
+    .image-section img {
+        max-height: 280px;
+    }
+
+    .content-section {
+        padding: 20px 16px;
+    }
+
+    .word-text {
+        font-size: 42px;
+    }
+
+    .chinese {
+        font-size: 22px;
+    }
+
+    .pos {
+        font-size: 16px;
+        margin-left: 8px;
+    }
+
+    .details-anim {
+        margin-top: 16px;
+    }
+
+    .action-btn {
+        margin-top: 20px;
+        padding: 12px 24px;
+        font-size: 16px;
+    }
+
+    /* 闪记/抄写输入框自适应，避免超出屏幕 */
+    input {
+        width: 100%;
+        max-width: none;
+        font-size: 20px;
+        padding: 12px;
+    }
+}
+
+/* 手机竖屏：进一步缩小 */
+@media (max-width: 480px) {
+    .word-text {
+        font-size: 34px;
+    }
+
+    .chinese {
+        font-size: 18px;
+    }
+
+    .flashcard-hint {
+        font-size: 26px;
+    }
+
+    .image-section img {
+        max-height: 220px;
+    }
+
+    .content-section {
+        padding: 16px 12px;
+    }
+}

diff --git a/frontend/src/components/TestMode.css b/frontend/src/components/TestMode.css
index f1935d52de2d881c13d551397035aa3c8a8c05f1..d324d2e3113bae7cee207e5ad0203018361b569a 100644 (file)
--- a/frontend/src/components/TestMode.css
+++ b/frontend/src/components/TestMode.css
@@ -324,3 +324,136 @@
     margin-top: 100px;
     color: #64748b;
 }
+
+/* ====================== 响应式适配 ====================== */
+/* 平板竖屏及以下：反馈区上下结构、输入框自适应 */
+@media (max-width: 768px) {
+    .test-container {
+        padding: 10px;
+    }
+
+    .test-card {
+        width: 100%;
+        min-height: auto;
+    }
+
+    .test-header {
+        padding: 14px 16px;
+    }
+
+    .test-status {
+        font-size: 16px;
+    }
+
+    .test-progress {
+        font-size: 15px;
+    }
+
+    .test-body {
+        padding: 16px;
+    }
+
+    /* 开始/完成/重考卡片 */
+    .test-start-card h1,
+    .test-complete-card h1,
+    .test-retest-card h1 {
+        font-size: 26px;
+    }
+
+    .test-info {
+        font-size: 18px;
+    }
+
+    /* 答题区 */
+    .testing-area {
+        padding: 20px 0;
+    }
+
+    .prompt-chinese {
+        font-size: 30px;
+    }
+
+    .prompt-pos {
+        font-size: 18px;
+    }
+
+    /* 输入行：宽度自适应，避免横向溢出 */
+    .input-row {
+        flex-direction: column;
+        gap: 12px;
+        width: 100%;
+    }
+
+    .test-input {
+        width: 100%;
+        font-size: 20px;
+        padding: 12px;
+    }
+
+    /* 反馈区：信息与思维导图改为上下结构 */
+    .feedback-wrapper {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .feedback-main {
+        padding: 16px;
+    }
+
+    .fb-status {
+        font-size: 18px;
+    }
+
+    .fb-word {
+        font-size: 28px;
+    }
+
+    .fb-chinese,
+    .fb-pos,
+    .fb-root,
+    .fb-affix {
+        font-size: 16px;
+    }
+
+    .fb-sentence {
+        font-size: 14px;
+    }
+
+    /* 思维导图放到下方，宽度撑满 */
+    .fb-image {
+        width: 100%;
+        padding: 8px;
+    }
+
+    .fb-image img {
+        max-height: 260px;
+    }
+
+    /* 抄写区：宽度自适应 */
+    .copy-area {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .copy-input {
+        width: 100%;
+        font-size: 18px;
+        padding: 10px;
+    }
+}
+
+/* 手机竖屏：进一步压缩 */
+@media (max-width: 480px) {
+    .prompt-chinese {
+        font-size: 24px;
+    }
+
+    .fb-word {
+        font-size: 24px;
+    }
+
+    .action-btn {
+        padding: 10px 22px;
+        font-size: 16px;
+    }
+}