手机上也好看：让网站完美适配各种屏幕

你的网站在电脑上很好看，但用手机打开一看——文字挤在一起，按钮点不到，图片溢出屏幕。

现在超过 60% 的网页浏览来自手机。这一关让你的网站在任何屏幕上都好看。

为什么响应式这么重要？

数据说话：

• 全球超过 60% 的网页浏览来自移动设备
• Google 从 2019 年开始以移动端版本为主要排名依据（Mobile-First Indexing）
• 如果你的网站在手机上体验差，Google 会降低它的搜索排名

对于作品集网站来说，招聘方或合作方可能在任何设备上查看你的网站。如果他们用手机打开，看到一个乱掉的布局，第一印象就毁了。

响应式设计的三个断点

Tailwind CSS 预设了几个常用的断点（屏幕宽度阈值）：

| 前缀 | 最小宽度 | 对应设备 | |------|---------|---------| | （无前缀） | 0px | 手机（竖屏） | | sm: | 640px | 手机（横屏） | | md: | 768px | 平板 | | lg: | 1024px | 桌面 | | xl: | 1280px | 大屏桌面 |

Tailwind 的响应式是"移动优先"的：没有前缀的样式适用于所有屏幕，加了前缀的样式只在对应宽度以上生效。

比如 grid-cols-1 md:grid-cols-2 lg:grid-cols-3：

• 手机：1 列
• 平板（768px+）：2 列
• 桌面（1024px+）：3 列

第一步：检查现有问题

先用浏览器的开发者工具模拟手机屏幕，看看现在有哪些问题。

按 F12 打开开发者工具，点击工具栏里的手机图标（或按 Ctrl+Shift+M），选择 iPhone 12 Pro 尺寸，刷新页面。

把你看到的问题截图或者描述给 AI：

我用手机模式查看网站，发现以下问题：
[描述你看到的具体问题，比如：导航栏文字太小、作品卡片排成一列但太窄、首页标题文字溢出屏幕等]

请帮我修复这些响应式问题。

---

第二步：优化导航栏

对 AI 说：

优化导航栏的移动端体验：

- 手机屏幕（宽度小于 768px）时，隐藏导航链接，显示汉堡菜单按钮（三条横线图标）
- 点击汉堡菜单，导航链接从顶部滑下来，显示为垂直列表
- 点击任意链接或点击菜单外部区域，菜单收起
- 菜单展开时，汉堡图标变成关闭图标（X）

在手机模式下测试导航菜单的开关。

---

第三步：全面响应式检查

对 AI 说：

帮我全面检查并修复网站的响应式问题：

1. 首页：标题文字在手机上适当缩小，按钮不要太小（至少 44px 高）
2. 作品页：卡片在手机上单列显示，平板上两列，电脑上三列
3. 关于页：如果有左右布局，手机上改为上下布局
4. 联系页：表单在手机上全宽显示，左右两栏改为上下排列
5. 所有页面：内容区域左右有适当的内边距，不要贴边

使用 Tailwind 的响应式前缀（sm: md: lg:）来实现。

---

关于"44px 最小点击区域"

这是 Apple 和 Google 都推荐的移动端设计规范：可点击元素的最小尺寸应该是 44x44 像素。

原因是人的手指触摸面积大约是 44px，如果按钮太小，用户很难精准点击，体验很差。

在 Tailwind 里，可以用 min-h-[44px] min-w-[44px] 来确保最小尺寸。

---

关于"横向滚动条"

手机端最常见的响应式问题是出现横向滚动条——页面比屏幕宽，用户需要左右滑动才能看到完整内容。

这通常是因为某个元素的宽度超出了屏幕宽度。常见原因：

• 图片没有设置 max-width: 100%
• 某个元素有固定宽度（比如 width: 800px）
• 某个元素有负的 margin

解决方法：在根元素加上 overflow-x: hidden，或者让 AI 找出具体是哪个元素超出了屏幕。

---

通关条件

完成以下三步即可通关：

1. 导航栏在手机上有汉堡菜单，可以正常开关
2. 作品卡片在手机上单列显示
3. 整体页面在手机上没有横向滚动条

卡住了？

• 汉堡菜单不工作？让 AI 检查点击事件是否绑定正确，状态变量是否控制了菜单显示
• 某个元素在手机上溢出？告诉 AI 具体是哪个元素，让它加上 overflow-hidden 或调整宽度
• Tailwind 响应式前缀不生效？确认 Tailwind 配置文件里的 content 路径包含了你的文件
• 手机上字体太小？让 AI 检查字体大小，确保正文至少 16px（手机上 14px 以下会很难读）