响应式设计Responsive Design

先看空间和操作方式：窄屏不只是更小：文字行长、触控目标、侧边栏和表格都可能需要重排，优先保留用户完成当前任务所需的信息和操作。

用规则切换布局：断点是在某个条件下切换规则的阈值，媒体查询是 CSS 表达这些条件的方式。例如把下面规则粘贴到项目 CSS：@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }。

用浏览器模拟手机查看效果：不需要真手机也能检查移动端布局。在 Chrome 开发者工具中，按 Cmd+Shift+M (Mac) 或 Ctrl+Shift+M (Windows) 即可切换设备模拟。你可以选择 iPhone 14 或 Samsung Galaxy 等常见手机尺寸。这是布局调整后最重要的验证步骤——在告诉 AI 你满意之前，一定要同时检查桌面端和移动端的效果。另外，Tailwind CSS 使用 sm:、md:、lg: 等响应式前缀来在不同屏幕宽度应用样式，所以当 AI 写出 md:grid-cols-3 时，它的意思是“在中等屏幕及以上使用 3 列”。