# Responsive

> 当用户发现页面在手机上显示有问题、布局错乱、需要适配移动端时使用 — 检查并修复响应式问题

- Skill: `lightpointventures/responsive` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lightpointventures/responsive`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lightpointventures/responsive/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lightpointventures (https://skillmd.com/u/lightpointventures)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lightpointventures/responsive

---


# 移动端适配

帮用户检查并修复网站在手机和平板上的显示问题。

## 步骤

### 1. 扫描响应式问题

读取项目中的 CSS 和 HTML，检查：

- **Viewport 设置** — 是否有正确的 viewport meta 标签
- **固定宽度** — 是否有硬编码的 px 宽度导致溢出
- **字体大小** — 移动端是否太小（最小 16px）
- **触摸目标** — 按钮和链接是否够大（最小 44x44px）
- **水平滚动** — 是否有元素超出屏幕宽度
- **媒体查询** — 是否有响应式断点
- **图片** — 是否设置了 max-width: 100%
- **导航** — 桌面导航在移动端是否可用

### 2. 输出问题报告

```
## 移动端适配报告

### 必须修复
- [文件:行号] 问题 + 修复方案

### 建议改进
- [文件:行号] 改进建议
```

### 3. 执行修复

用户确认后，修复所有问题：

- 添加 viewport meta 标签
- 固定宽度改为响应式（max-width、百分比、flex/grid）
- 添加移动端媒体查询
- 增大触摸目标尺寸
- 导航改为汉堡菜单（如果需要）

### 4. 验证

> 适配完成。建议用浏览器的设备模拟器检查以下尺寸：
> - 手机：375px（iPhone）、390px（iPhone Pro）
> - 平板：768px（iPad）