v1.2.3 修复了移动端显示问题

CHANGELOG.md

@@ -1,4 +1,14 @@
-# 🎉 友情链接管理器 v1.2.2 发布
+# 🎉 友情链接管理器 v1.2.3 发布
+
+## 📱 移动端适配优化
+- **响应式布局重构**：彻底解决移动端页面溢出问题
+- **智能列数调整**：
+  - 桌面端：按后台设置显示（2-6列）
+  - 平板端（≤1024px）：自动调整为最多2列
+  - 手机端（≤600px）：优化为单列显示
+  - 小屏手机（≤480px）：特殊优化间距和字体大小
+- **CSS变量技术**：使用现代CSS变量确保样式优先级正确
+- **测试文件提供**：新增响应式测试页面，方便验证效果
 
 ## ✨ 新增功能
 - **链接描述支持**：为每个链接添加描述信息，让友情链接更加丰富
@@ -27,9 +37,10 @@
 - 优化管理界面布局
 
 ## 📊 兼容性
-- 支持从 v1.1.1 无缝升级
+- 支持从 v1.2.2 无缝升级
 - 自动检测并修复数据库结构
 - 保持原有数据完整性
+- 完美兼容各种移动设备和屏幕尺寸
 
 ---
 
@@ -38,6 +49,13 @@
 2. 插件会自动检测并升级数据库结构
 3. 如遇问题可使用"数据库修复"功能
 4. 所有原有数据将完整保留
+5. 移动端适配自动生效，无需额外配置
+
+## 🧪 测试说明
+- 新增 `test-responsive.html` 测试文件
+- 可在浏览器中打开测试响应式效果
+- 支持调整窗口大小查看不同布局
+- 建议使用开发者工具设备模拟器进行全面测试
 
 ## 技术支持
 - 如有问题请访问：https://lhcy.org

README.md

@@ -134,7 +134,7 @@
 ## 📞 技术支持
 
 - **作者网站**：https://lhcy.org
-- **插件版本**：1.2.2
+- **插件版本**：1.2.3
 - **WordPress要求**：5.0+
 - **PHP要求**：7.0+
 

assets/css/style.css

@@ -307,16 +307,68 @@
     border-right: none !important;
 }
 
+/* 移动端优化样式 */
+@media (max-width: 480px) {
+    .flm-link-card {
+        padding: 15px;
+        margin: 0 5px 10px 5px;
+    }
+    
+    .flm-link-icon-container img {
+        width: 48px;
+        height: 48px;
+    }
+    
+    .flm-link-name {
+        font-size: 14px;
+        margin-top: 8px;
+    }
+    
+    .flm-link-description {
+        font-size: 12px;
+        margin-top: 4px;
+    }
+    
+    .flm-links-container {
+        gap: 10px;
+        margin: 10px -5px;
+    }
+}
+
 .flm-link-card a {
     text-decoration: none;
     color: inherit;
     display: block;
 }
 
-/* 响应式设计 */
+/* 响应式设计 - 后台管理界面 */
 @media (max-width: 1024px) {
-    .flm-links-container {
+    .flm-admin-container {
-        grid-template-columns: repeat(2, 1fr) !important;
+        flex-direction: column;
+    }
+    
+    .flm-add-form {
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .flm-link-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+    
+    .flm-link-preview {
+        min-width: auto;
+        width: 100%;
+    }
+    
+    .flm-link-actions {
+        min-width: auto;
+        width: 100%;
+        display: flex;
+        gap: 10px;
     }
 }
 
@@ -329,12 +381,22 @@
         max-width: 100%;
     }
     
-    .flm-links-container {
+    .flm-top-actions {
-        grid-template-columns: 1fr !important;
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .flm-top-actions .button {
+        margin-right: 0;
+        margin-bottom: 10px;
     }
     
     .flm-link-item {
         flex-direction: column;
         align-items: flex-start;
     }
+    
+    .flm-link-fields {
+        width: 100%;
+    }
 }

friend-links-manager.php

@@ -2,7 +2,7 @@
 /*
 Plugin Name: 友情链接管理器
 Description: 管理并展示友情链接，支持导入导出
-Version: 1.2.2
+Version: 1.2.3
 Author: 林海草原
 Author URI: https://lhcy.org
 Text Domain: friend-links-manager

includes/shortcode.php

@@ -37,8 +37,24 @@ function flm_display_friend_links($atts) {
         <?php endforeach; ?>
     </div>
     <style>
+    /* 默认桌面端布局 - 使用CSS变量 */
     .flm-links-container {
-        grid-template-columns: repeat(<?php echo $desktop_columns; ?>, 1fr) !important;
+        --flm-columns: <?php echo $desktop_columns; ?>;
+        grid-template-columns: repeat(var(--flm-columns), 1fr) !important;
+    }
+    
+    /* 平板端响应式 */
+    @media (max-width: 1024px) {
+        .flm-links-container {
+            grid-template-columns: repeat(min(var(--flm-columns), 2), 1fr) !important;
+        }
+    }
+    
+    /* 手机端响应式 */
+    @media (max-width: 600px) {
+        .flm-links-container {
+            grid-template-columns: 1fr !important;
+        }
     }
     </style>
     <?php