手机版网站的开发，核心是响应式设计。一套代码，根据屏幕尺寸自动调整布局。实现方法分三步。

第一步：用Flex/Grid搭建基础布局

告诉AI：“创建一个产品列表页，产品卡片在桌面上三列排列，手机上单列排列。”AI会生成对应的CSS代码，使用Grid布局定义列数，用媒体查询在手机尺寸下将列数改为1。

第二步：用媒体查询设置断点

在CSS中添加媒体查询，定义不同屏幕尺寸下的样式。常见的断点：768px（手机竖屏与平板的分界）、1024px（平板与桌面的分界）。在768px以下的断点中，调整字号、按钮尺寸、图片宽度和布局方向。

第三步：用自然语言调整细节

在浏览器中预览页面，用开发者工具切换到手机模式，检查显示效果。发现问题直接告诉AI：“在手机屏幕上，产品卡片的间距太小，图片宽度超出屏幕，导航菜单没有折叠。”AI会生成对应的修复代码。反复调整直到手机端显示正常。