手机适配：按内容重排，而不是缩小桌面

响应式布局要解决什么

MDN 将响应式网页设计介绍为适应不同屏幕尺寸和分辨率的一组方法，包括弹性布局、媒体查询与灵活媒体。对作品集而言，目标是保持信息可读、操作可达，不是把桌面页面整体压缩。

先列内容的优先级：项目标题、摘要和入口通常比装饰细节更重要。双栏在空间不足时改为单栏，封面保留比例，长单词和网址允许折行。断点应在内容开始拥挤的位置设置。

用四类内容检查手机页面

长标题：替换成真实项目中最长的标题，检查是否被遮挡。图片：观察裁剪后是否丢失关键证据，必要时在正文给完整图。导航：检查所有核心入口是否仍可到达，不能仅依赖桌面侧栏。

横向内容：时间线或数据表可以局部滚动，但整个页面不应因固定宽度被迫左右移动。输入框和操作按钮应保留可读标签，放大文字后也不能相互覆盖。

记录问题的方式

每个问题记录视口宽度、触发内容、预期和实际表现。例如：“长项目名换行后，按钮被卡片底部裁掉；预期卡片自然增高。”比“手机不好看”更容易修复。

完成一次调整后复查同一场景，再检查相邻宽度。设备模拟能帮助发现布局问题，但不能替代所有真实设备和辅助技术测试；保留测试范围，避免宣称全机型通过。

常见问答

可核验资料

• MDN：响应式网页设计：弹性布局、媒体查询和适应不同视口的基本方法。

以上链接支持本文相关基础说明；策划步骤与例子由本站整理。