7.2 案例实战：响应式落地页全程断案
文档摘要
7.2 案例实战：响应式落地页全程断案 本节按 7.1 的五步节拍，从零做一个产品发布落地页：导航、首屏、功能卡组、价格表、报名表单、成功弹窗六个区块。背景 → 操作 → 结果 → 解读 → 变式五段展开，是前六章判决的总演练。 位置：实战章第二案，全册最长的单案。每个动作标注出处（如「判据见 2.2」），读时可随时回翻。 背景：需求与断点行为表 某开发者工具的发布页。转化目标：留下邮箱预约演示。设计稿三张（手机、平板、桌面），断点分析后行为表如下： 图 7-2 落地页三断点线框 图 7-2 落地页三断点线框 行为表要点：导航换挡点选 lg（链接五条加品牌，md 下平铺预算不足，判据见 3.1）；首屏 lg 起左右分栏（图左文右， 两块）；功能卡 ；
7.2 案例实战：响应式落地页全程断案
本节按 7.1 的五步节拍，从零做一个产品发布落地页：导航、首屏、功能卡组、价格表、报名表单、成功弹窗六个区块。背景 → 操作 → 结果 → 解读 → 变式五段展开，是前六章判决的总演练。
位置：实战章第二案，全册最长的单案。每个动作标注出处（如「判据见 2.2」），读时可随时回翻。
背景：需求与断点行为表
某开发者工具的发布页。转化目标：留下邮箱预约演示。设计稿三张（手机、平板、桌面），断点分析后行为表如下：
图 7-2 落地页三断点线框
行为表要点：导航换挡点选 lg（链接五条加品牌，md 下平铺预算不足，判据见 3.1）；首屏 lg 起左右分栏（图左文右，col-lg-6 两块）；功能卡 row-cols-1 row-cols-md-2 row-cols-lg-3；价格表 lg 前只出主推档、lg 起三档并排；表单字段「姓名与邮箱成对、lg 起同行」（成对字段判例见 3.2）。
操作：六区块的关键判决
<body> <!-- 区块一：导航（3.1 的标准件，expand 临界点判 lg） --> <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top"> <div class="container"> <a class="navbar-brand fw-bold" href="#">GridLab</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="nav"> <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> <li class="nav-item"><a class="nav-link" href="#features">功能</a></li> <li class="nav-item"><a class="nav-link" href="#pricing">价格</a></li> <li class="nav-item"><a class="nav-link" href="#signup">预约</a></li> </ul> </div> </div> </nav> <!-- 区块二：首屏。xs 居中单列，lg 起图文分栏 --> <header class="py-5 bg-body-tertiary"> <div class="container"> <div class="row align-items-center g-5"> <div class="col-12 col-lg-6 text-center text-lg-start"> <h1 class="display-4 fw-bold lh-1">把每个布局问题<br class="d-none d-lg-inline">都断得明明白白</h1> <p class="lead text-body-secondary mt-3">六个断点，一套法典，所有响应式行为逐档过堂。</p> <a href="#signup" class="btn btn-primary btn-lg mt-3 px-4">预约演示</a> </div> <div class="col-12 col-lg-6"> <img src="hero-app.png" class="img-fluid rounded-4 shadow" width="720" height="480" alt="GridLab 界面预览" loading="lazy" decoding="async"> </div> </div> </div> </header>
<!-- 区块三：功能卡组（row-cols 三档换列，卡组微调见 3.4） --> <section id="features" class="container py-5"> <h2 class="text-center fw-bold mb-4">三件核心武器</h2> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"> <div class="col"><div class="card h-100 border-0 shadow-sm rounded-4"> <div class="card-body p-4"> <i class="bi bi-grid-3x3-gap fs-2 text-primary" aria-hidden="true"></i> <h5 class="fw-semibold mt-2">栅格体检</h5> <p class="text-body-secondary mb-0">十二列预算表，行满换行现场验证。</p> </div></div></div> <div class="col"><div class="card h-100 border-0 shadow-sm rounded-4"> <div class="card-body p-4"> <i class="bi bi-rulers fs-2 text-primary" aria-hidden="true"></i> <h5 class="fw-semibold mt-2">断点观察台</h5> <p class="text-body-secondary mb-0">视口一变即报档位，取证零猜测。</p> </div></div></div> <div class="col"><div class="card h-100 border-0 shadow-sm rounded-4"> <div class="card-body p-4"> <i class="bi bi-sliders fs-2 text-primary" aria-hidden="true"></i> <h5 class="fw-semibold mt-2">主题量刑</h5> <p class="text-body-secondary mb-0">变量四级阶梯，定制先判级后动手。</p> </div></div></div> </div> </section> <!-- 区块四：价格表。lg 前主推档居中，lg 起三档并排（显隐判例见 2.4） --> <section id="pricing" class="bg-body-tertiary py-5"> <div class="container"> <div class="row g-4 justify-content-center"> <div class="col-12 col-md-8 col-lg-4"> <div class="card h-100 rounded-4"><div class="card-body p-4 text-center"> <h6 class="text-body-secondary">入门</h6> <p class="display-6 fw-bold mb-1">免费</p> <p class="text-body-secondary small">单人 · 社区支持</p> </div></div> </div> <div class="col-12 col-md-8 col-lg-4"> <div class="card h-100 rounded-4 border-primary shadow-lg"><div class="card-body p-4 text-center"> <h6 class="text-primary">专业（主推）</h6> <p class="display-6 fw-bold mb-1">￥39<span class="fs-6 text-body-secondary">/月</span></p> <p class="text-body-secondary small">五人 · 全部功能</p> <span class="badge text-bg-primary rounded-pill">推荐</span> </div></div> </div> <div class="col-12 col-lg-4 d-none d-lg-block"> <div class="card h-100 rounded-4"><div class="card-body p-4 text-center"> <h6 class="text-body-secondary">团队</h6> <p class="display-6 fw-bold mb-1">定制</p> <p class="text-body-secondary small">不限人数 · 专属支持</p> </div></div> </div> </div> </div> </section>
<!-- 区块五与六：报名表单（成对字段判例见 3.2）+ 成功弹窗（焦点契约见 6.2） --> <section id="signup" class="container py-5"> <div class="row justify-content-center"> <div class="col-12 col-lg-8"> <form id="demoForm" class="row g-3" novalidate> <div class="col-12 col-md-6"> <label for="s-name" class="form-label">称呼</label> <input type="text" class="form-control" id="s-name" required> </div> <div class="col-12 col-md-6"> <label for="s-mail" class="form-label">工作邮箱</label> <input type="email" class="form-control" id="s-mail" required> </div> <div class="col-12"> <button class="btn btn-primary btn-lg px-4" type="submit">提交预约</button> </div> <div class="col-12" aria-live="polite"><!-- 提交结果播报区（判例见 6.2） --></div> </form> </div> </div> </section> <div class="modal fade" id="okModal" tabindex="-1" aria-labelledby="okT" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-sm"> <div class="modal-content"> <div class="modal-body text-center p-4"> <i class="bi bi-check-circle text-success fs-1" aria-hidden="true"></i> <h5 class="mt-2" id="okT">预约成功</h5> <p class="text-body-secondary mb-0">确认邮件已发出，两个工作日内联系你。</p> </div> </div> </div> </div> <script src="bootstrap.bundle.min.js"></script> <script> const form = document.getElementById('demoForm'); const ok = new bootstrap.Modal(document.getElementById('okModal')); form.addEventListener('submit', (e) => { e.preventDefault(); if (!form.checkValidity()) { form.reportValidity(); return; } ok.show(); // 异步成功后由实例层控制（判例见 6.1） form.reset(); }); </script> </body>
结果：六断点过堂记录
按 7.1 清单验收：xs——导航折叠、卡组单列、价格只出前两档（主推居中）、表单字段整行、无横滚；md——卡组两列、姓名邮箱同行、价格两档；lg——导航平铺、首屏图文分栏、功能三列、价格三档（第三档 d-lg-block 回归）；xl 与 xxl——container 封顶 1140/1320，正文行宽稳定。传输预算：按需编译 CSS 68KB、脚本 22KB（只用 modal），达标。
解读：本案的五个关键判决
一是导航临界点 lg 而非 md：五条链接加品牌在 md 平铺约需 760px，md 档 768px 余量为零，判 lg 留出呼吸（3.1 的宽度预算法）。二是首屏 text-center text-lg-start：文案对齐随分栏换挡，一行类名省掉一整套媒体查询。三是价格第三档用显隐而非删除：DOM 里保留「团队」档信息对 SEO 有益，视觉上 lg 前退场（2.4 的边界用法：内容非重复，仅展示策略差异）。四是表单与弹窗的联动走实例层：异步成功才关弹窗，data 属性自动行为不够用（6.1 的异步判例）。五是播报区 aria-live：提交结果对读屏可见（6.2 判例二）。
变式：需求变更的三次改判
变式一：市场要求首屏加「免费试用」次按钮——首屏按钮行改 d-flex gap-2 flex-wrap justify-content-center justify-content-lg-start，两按钮窄屏换行宽屏并排。变式二：价格改「lg 起四档」——第三档显隐判 d-none d-lg-block，第四档判 d-none d-xl-block，阶梯显隐代替重排。变式三：表单要加公司名与手机号——成对字段继续 col-12 col-md-6 两两并排，长字段（备注）整行，3.2 的分栏通则直接扩容。
💡 关键直觉：本案没有一个区块需要「新知识」——每个动作都是前六章某条判决的直接引用。实战能力的本质是判决检索能力：看到需求能想起判例所在，这比记住任何一段代码都值钱。
结案要点
- 五步节拍全程走通：行为表先行、骨架无视觉类、组件先官方、微调一类一验、六断点过堂；
- 临界点、显隐、异步关框、aria 播报是本案五个易错点，全部有前文判例背书；
- 预算验收纳入交付定义：CSS 68KB、脚本 22KB，达标才算完；
- 需求变更走「改判」思路：查判例、动最少的类，不推倒重来。
最后一节把悬案处理与原则收束，全册终审。