同一个网页在不同设备上显示效果差异很大。电脑上三列并排的产品卡片，在手机上可能挤成一团；桌面端清晰可读的文字，在手机上可能需要放大才能看清。这节课从移动优先思路出发，用AI生成响应式适配方案，确保页面在不同屏幕尺寸下都能提供良好的浏览体验。

第一步：确定断点位置，规划响应式布局策略。 断点是指布局在特定屏幕宽度下发生变化的临界值。常见的断点参考值包括手机竖屏、平板和桌面端。更实际的做法是根据你的页面内容决定断点位置——当某个区域的布局开始挤压或换行时，就在那个宽度设置断点。描述“当屏幕宽度小于768px时，三列网格改为单列，导航菜单折叠为汉堡菜单”的要求，AI会在原有CSS基础上生成对应的媒体查询代码，覆盖小屏幕下的布局调整。多个断点的逐层设置可以让页面在从小屏到大屏的过程中保持内容完整性和操作可用性。

第二步：用AI调整多端下的字体、间距和图片尺寸。 桌面端设计在小屏幕上同样需要适配处理。文字大小、行距、内边距、图片尺寸等都需要在不同屏幕下相应调整。描述“在手机上主标题字号缩小至30px，正文字号调整为16px，图片宽度占满屏幕”的要求，AI会生成对应的响应式样式更新。适配原则是确保小屏幕上内容不拥挤、操作不费力。文字清晰可读、按钮大小适中、内容不溢出屏幕，达到这些基本要求即可。

第三步：用AI测试多端适配效果并修复显示问题。 适配完成后在不同设备上检查显示效果。打开页面后检查文字是否清晰可读、按钮点击区域是否足够大、内容是否有横向溢出或重叠。遇到适配问题直接截图发给AI，并描述“在手机屏幕上，底部信息区的内容重叠在一起，请调整间距”或“导航菜单在小屏幕上显示不全，请改为垂直排列”。AI会根据你的反馈生成对应的样式修复代码。多端适配涉及多种设备和屏幕尺寸，每次调整后在不同屏幕宽度下重新检查，反复几次直到各种尺寸下都能正常显示。