自适应网站，目标怎样拆成页面任务
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /78a644d51bed.html
📄
自适应网站，目标怎样拆成页面任务
自适应网站的目标不能直接写成“把网站做成自适应”，而要拆成一组可验收的页面任务：先确定每个页面在不同视口下必须完成什么，再把内容顺序、断点、组件行为和验收条件写进任务单。拆解的核心不是“加媒体查询”，而是让同一份内容在手机、平板和桌面都能被读到、点到、看懂。
常见误解：自适应不是全站一次性改版
很多团队把自适应网站当成一个整站工程，结果任务写成“首页自适应”“全站适配移动端”，执行时没人知道做到什么程度算完成。更合理的做法是按页面类型和用户任务拆：首页解决入口导航，列表页解决筛选与浏览，详情页解决阅读与转化，表单页解决输入与提交。每个页面再按断点列出必须保留和可以折叠的内容。
判断一个页面任务是否合格，可以看它是否包含三个要素：视口范围、页面行为、验收证据。例如“在 320px 到 767px 视口下，导航折叠为菜单按钮，点击后展开主导航，截图记录展开与收起状态”，这就是可执行任务；“移动端优化导航”则不是。
从目标到页面任务的拆解步骤
- 列出目标页面清单：按模板归类，如首页、栏目页、文章页、产品页、搜索页、表单页，避免逐条 URL 重复拆解。
- 为每类页面写用户任务：用户来这里是要找入口、比较选项、读完内容，还是提交信息。
- 设定视口区间：常见参考是窄屏、中屏、宽屏三段，具体数值按项目设计规范确定，不照搬固定断点。
- 逐项标注内容优先级：必须始终可见、可折叠、可横向滚动、可替换为更简形式。
- 写验收条件：在目标视口下检查是否出现横向滚动、文字是否被截断、按钮是否可点、图片是否变形、表单是否可完成。
这里的关键是区分“可能原因”和“已经定位的原因”。如果页面在窄屏出现横向滚动，可能是固定宽度容器、未约束的图片、长英文单词或表格溢出，不能直接断定是某一个元素导致，需要逐项排查后再下结论。
页面任务单里应写清哪些检查项
- 内容顺序：窄屏下是否仍按阅读逻辑排列，而不是把重要内容推到页面底部。
- 点击区域：导航、按钮、表单控件在触屏下是否有足够可点范围。
- 图片与媒体：是否按容器缩放，是否保留可读的替代文本。
- 表格与代码：宽内容是否可横向滚动，滚动容器是否影响页面整体宽度。
- 表单：输入框、下拉框、提交按钮在窄屏下是否完整可见并可操作。
- 性能与加载：不同视口下是否加载了不必要的超大资源，是否影响首屏内容出现。
这些检查项要写成可复现的步骤。例如在浏览器开发者工具中切换到窄屏视口，打开目标页面，检查 document.documentElement.scrollWidth 是否大于视口宽度；如果大于，再逐个隐藏可疑容器定位溢出源。这个例子说明的是排查方法，不代表所有溢出都由同一原因造成。
一个假设示例：文章页如何拆任务
假设某自适应网站有一类文章页，目标是在窄屏下保证阅读体验。可以拆成以下任务：
- 窄屏下正文单列显示，标题、作者、发布时间按阅读顺序排列。
- 宽屏下正文保持可读行宽，不因容器过宽导致每行字数过多。
- 文内图片按容器宽度缩放，不超出视口。
- 文内表格允许横向滚动，不撑破页面。
- 相关阅读模块在窄屏下置于正文之后，不打断阅读。
验收时分别用窄屏、中屏、宽屏视口打开同一篇文章，检查是否出现横向滚动、文字截断、图片溢出和模块错位。若某项不通过，记录视口宽度、页面地址、现象和截图，再回到任务单修正对应条目。
拆解后如何判断任务是否完成
完成不等于“看起来没问题”，而是每条任务都有对应证据。可以按页面类型建立检查表，逐项标记通过或不通过。对于不通过的项，写明是内容问题、样式问题还是结构问题，再决定是调整断点、修改组件还是重排内容。这样做的结果是：自适应网站的目标被落到具体页面、具体视口和具体行为上，后续修改也有据可查。
下一步，选一个目标页面，按上面的步骤写出三到五条页面任务，并在两个不同视口下实际检查一遍，把不通过的项记录下来。
