响应式设计

它到底指什么？

如果你只在电脑浏览器上看你的网站，可能觉得一切完美。但当你用手机打开同一个页面——文字可能溢出屏幕、按钮小到点不准、两栏布局挤成一团。

响应式设计就是解决这个问题的方法。它让网页能够"感知"当前屏幕的宽度，并据此自动调整布局：大屏幕上显示三栏并排，手机上变成单栏堆叠；大屏幕上的导航栏横向展开，手机上折叠成一个菜单按钮。

在你的项目里会怎么出现？

如果你使用 Tailwind CSS 这类工具，AI 生成的代码里会出现像 md:grid-cols-2 这样的写法——意思是"在中等及以上尺寸的屏幕上显示两列，更小的屏幕上自动变成一列"。这些就是响应式设计的具体实现。

大多数现代 UI 组件库和框架都内置了响应式的基础能力，AI 生成的代码也通常会考虑移动端适配。但最终你还是需要亲自在手机上打开看一看——AI 写的布局是否真的在小屏幕上好用，只有实际测试才知道。

有什么需要注意的？

一个常见的错误是只在电脑上开发和测试，上线后才发现手机上完全不能用。建议从一开始就时不时地用浏览器的"设备模拟"功能（开发者工具里可以切换到手机视图）来检查你的页面效果。