模块 3 · 界面设计与迭代 · 第 3/5 节
响应式设计与移动端检查
🎯学习目标
- 会切换设备预览
- 知道手机端的常见问题
- 会给出移动端修改指令
🧭操作步骤
- 1
切换设备视图
在预览区切换手机、平板、电脑尺寸。
- 2
逐页检查
检查导航、文字大小、按钮是否易点、图片是否变形、表格是否溢出。
- 3
用真机测试
发布后用自己的手机打开网址，检查实际触控体验。
- 4
描述问题
具体说明哪个尺寸、哪个页面、出现什么问题。
💬可复制提示词
手机端修复
在手机宽度下：1）顶部导航改为汉堡菜单；2）三列卡片改为单列；3）表格改为卡片式列表；4）所有按钮高度至少 44 像素。
✅ 预期结果
- 每个页面在手机上可正常使用
- 无横向滚动和文字溢出
- 按钮易于点击
⚠️ 常见错误
- 只在电脑上检查
- 表格在手机上横向溢出
- 字太小、按钮太密
📝自检题
1. 手机端按钮的推荐最小高度大约是？
学完了？标记为已完成，记录你的进度。