模板:最新卡面/行：修订间差异

2024年7月16日 (二) 16:00的最新版本

   [[File:{{{ID}}}-卡面.webp|居中|200px|link={{{标题}}}]]

{{{标题}}}

@@ 第1行： / 第1行： @@
-<!-- 使用div class="card"包裹每个卡面 -->
 <div class="card">
      <!-- 卡面 -->
@@ 第13行： / 第12行： @@
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
      transition: transform 0.2s; /* 添加动画效果 */
-     max-width: 100px; /* 设置卡片的最大宽度为200px */
+     max-width: 200px; /* 设置卡片的最大宽度为200px */
      display: flex;
      flex-direction: column;
@@ 第35行： / 第34行： @@
      white-space: normal; /* 正常换行 */
      text-overflow: ellipsis; /* 用省略号表示溢出部分 */
+}
+/* Media Queries for Mobile Devices */
+@media (max-width: 600px) {
+    .card {
+        flex: 1 1 150px; /* 调整基础宽度为150px */
+        max-width: 150px; /* 设置卡片的最大宽度为150px */
+    }
+    .card-title {
+        padding: 5px 0; /* 减小标题的上下内边距 */
+        max-height: 40px; /* 设置标题的最大高度为40px */
+    }
 }
 }}