响应式设计演示

2026年2月6日

响应式设计演示

PowerWiki 采用现代的响应式设计，完美适配所有设备。

设计理念

移动优先

PowerWiki 遵循"移动优先"的设计原则：

  1. 从小屏开始 - 先设计移动版本
  2. 逐步增强 - 为大屏幕添加更多功能
  3. 流体布局 - 使用百分比而不是固定像素
  4. 灵活图片 - 图片自动缩放

设备适配

设备类型 屏幕宽度 特点
手机 < 576px 单列布局，大按钮，简化导航
平板 576px - 992px 两列布局，优化触摸交互
桌面 > 992px 多列布局，完整功能
超宽屏 > 1400px 最大宽度限制，两侧留白

布局适配

导航菜单

手机版本

┌─────────────────┐
│ ☰ PowerWiki     │
├─────────────────┤
│ 首页            │
│ 功能演示        │
│ 部署指南        │
│ 关于            │
└─────────────────┘

桌面版本

┌──────────────────────────────────────────┐
│ PowerWiki  首页  功能演示  部署指南  关于 │
└──────────────────────────────────────────┘

内容布局

手机版本

┌─────────────────┐
│ 标题            │
├─────────────────┤
│ 内容            │
│ 内容            │
│ 内容            │
├─────────────────┤
│ 侧边栏          │
└─────────────────┘

桌面版本

┌──────────────────────────────────────┐
│ 导航                                 │
├──────────────────┬──────────────────┤
│ 侧边栏           │ 主要内容         │
│                  │                  │
│ 目录             │ 文章             │
│ 标签             │ 代码块           │
│ 搜索             │ 图表             │
└──────────────────┴──────────────────┘

字体和排版

响应式字体大小

/* 手机 */
body { font-size: 14px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }

/* 平板 */
@media (min-width: 576px) {
  body { font-size: 15px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
}

/* 桌面 */
@media (min-width: 992px) {
  body { font-size: 16px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
}

行高和间距

  • 行高 - 1.6 倍字体大小，提高可读性
  • 段落间距 - 1.5 倍行高
  • 标题间距 - 2 倍行高

图片响应式

图片缩放

<!-- 自动缩放 -->
<img src="image.png" alt="描述" style="max-width: 100%; height: auto;">

<!-- 响应式图片 -->
<picture>
  <source media="(min-width: 992px)" srcset="image-large.png">
  <source media="(min-width: 576px)" srcset="image-medium.png">
  <img src="image-small.png" alt="描述">
</picture>

图片优化

  • 格式选择 - 使用 WebP 格式，降级到 PNG/JPG
  • 尺寸优化 - 为不同设备提供不同尺寸
  • 懒加载 - 延迟加载屏幕外的图片

表格响应式

桌面版本

功能 说明 状态
自动同步 从 Git 仓库自动同步 ✅
语法高亮 100+ 种语言支持 ✅

手机版本

功能: 自动同步
说明: 从 Git 仓库自动同步
状态: ✅

功能: 语法高亮
说明: 100+ 种语言支持
状态: ✅

代码块响应式

水平滚动

在手机上，代码块会自动启用水平滚动：

// 长代码行会自动换行或滚动
const veryLongVariableNameThatExceedsTheScreenWidth = "这是一个很长的变量名";

字体大小调整

  • 手机 - 12px，确保可读性
  • 平板 - 13px
  • 桌面 - 14px

交互元素

按钮大小

  • 手机 - 最小 44x44px，便于触摸
  • 桌面 - 最小 32x32px

链接间距

  • 手机 - 链接间距至少 8px
  • 桌面 - 链接间距至少 4px

性能优化

加载优化

  1. 关键 CSS - 内联关键样式
  2. 异步加载 - 非关键 JavaScript 异步加载
  3. 图片优化 - 压缩和格式转换
  4. 缓存策略 - 利用浏览器缓存

渲染优化

  1. 避免重排 - 减少 DOM 操作
  2. 使用 transform - 使用 GPU 加速
  3. 防抖和节流 - 优化事件处理
  4. 虚拟滚动 - 长列表优化

无障碍设计

键盘导航

  • 所有交互元素都可通过键盘访问
  • 使用 Tab 键导航
  • 使用 Enter 或 Space 激活

屏幕阅读器

  • 使用语义化 HTML
  • 添加 ARIA 标签
  • 提供替代文本

颜色对比

  • 文本和背景的对比度至少 4.5:1
  • 使用不仅依赖颜色的指示

测试清单

  • 在 iPhone SE（375px）上测试
  • 在 iPad（768px）上测试
  • 在桌面（1920px）上测试
  • 在超宽屏（2560px）上测试
  • 测试所有交互元素
  • 测试图片加载和缩放
  • 测试代码块滚动
  • 测试表格显示
  • 测试导航菜单
  • 测试页面加载速度

浏览器兼容性

PowerWiki 支持以下浏览器：

浏览器 最低版本 备注
Chrome 90+ 完全支持
Firefox 88+ 完全支持
Safari 14+ 完全支持
Edge 90+ 完全支持
iOS Safari 14+ 完全支持
Android Chrome 90+ 完全支持

提示: PowerWiki 的响应式设计确保在任何设备上都能提供最佳的用户体验。

更新时间：2026年2月24日