四类真实浏览场景
办公大屏：最优浏览环境，完整展示布局、细节与动效；
13–15 寸笔记本：面试前快速速读，排版不能拥挤；
手机通勤浏览：屏幕小、注意力分散，保证基础可读；
现场投屏展示：字号、对比度要求最高，边缘内容易被裁切。
网站作品集响应式规范
设置三段核心断点：桌面≥1200px、平板 768–1199px、移动端＜767px。
布局：多列项目网格移动端改为单列，侧边栏折叠后置，Hero 区重新排版适配竖屏；
文字：移动端标题≥24px，正文不低于 16px，加大行距提升阅读舒适度；
图片：横向截图纵向堆叠，支持点击放大查看界面细节；
导航：顶部导航切换 44×44px 以上汉堡菜单，移除仅 hover 可见的关键信息；
交互：舍弃依赖鼠标悬浮的功能，减少横向滚动，按钮预留足够触摸间距。
PDF 适配要点
优先选用 16:9 横版，全场景更友好。手机查看字号不能低于 12pt；投屏展示核心文字≥18pt，规避浅灰低对比文字，重要内容居中放置，避开页面边缘。时间充裕可额外制作一份轻量化手机精简 PDF。
测试优先级与自检清单
优化优先级：桌面端（最高）＞移动端基础可用＞平板微调＞投屏专项检查。
上线前逐项测试：电脑全屏、缩放多宽度、手机浏览器、多浏览器兼容；核对全部图片、链接正常加载；委托他人用不同设备复测；PDF 单独手机、投屏预览。
核心原则：桌面保证完整精致，移动端保证不崩布局、文字清晰，投屏保证远距离可读，兼顾全场景稳定体验，全方位体现你的适配思维与产品设计素养。
