diff --git a/CHANGELOG.md b/CHANGELOG.md index fc05564..5aa7327 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index d346f8f..91577a4 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ ## 📞 技术支持 - **作者网站**:https://lhcy.org -- **插件版本**:1.2.2 +- **插件版本**:1.2.3 - **WordPress要求**:5.0+ - **PHP要求**:7.0+ diff --git a/assets/css/style.css b/assets/css/style.css index c302020..a822d5a 100644 --- a/assets/css/style.css +++ b/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 { - grid-template-columns: repeat(2, 1fr) !important; + .flm-admin-container { + 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 { - grid-template-columns: 1fr !important; + .flm-top-actions { + 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%; + } } \ No newline at end of file diff --git a/friend-links-manager.php b/friend-links-manager.php index a848397..d911ca1 100644 --- a/friend-links-manager.php +++ b/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 diff --git a/includes/shortcode.php b/includes/shortcode.php index e5c4ecc..4d47e5a 100644 --- a/includes/shortcode.php +++ b/includes/shortcode.php @@ -37,8 +37,24 @@ function flm_display_friend_links($atts) {