页面在电脑上看着正常，在手机上可能就变形了。多端适配不是让页面在不同设备上“看起来一样”，而是让页面在不同屏幕尺寸下都能好用。这节课从移动优先思路出发，用AI生成响应式适配方案。

移动优先设计思路。 先确定在手机屏幕上的布局和样式，再逐步向平板和桌面扩展。描述“在手机屏幕上，三列网格变为单列，导航菜单折叠为汉堡菜单，正文增大字号以提高可读性”，AI会生成对应的响应式代码。

AI生成断点方案并调整多端下的样式。 描述页面在不同屏幕宽度下的适配需求，AI会生成对应的媒体查询代码，覆盖小屏幕下的布局和样式调整。断点的位置可以根据页面内容的实际挤压情况来确定，当某个区域的布局开始出现换行或重叠时，就在对应的宽度设置断点。在适配调整时，不同屏幕尺寸下的文字大小、行距、内边距和图片尺寸都需要分别确认，确保每个屏幕尺寸下内容的可读性和操作的便捷性。

多端下的样式细化与检查。 适配完成后，在不同设备上检查页面的显示效果。重点确认文字是否清晰可读、按钮和链接的点击区域是否足够大、内容是否有横向溢出或重叠。发现问题后截图发给AI，描述具体问题，AI会生成对应的修复代码。适配涉及多种设备和屏幕尺寸，可能需要几轮调整才能达到各个尺寸下的稳定显示。