技能｜Web显示美学体检与修复法

适用场景

用户反馈"部分页面显示功能不完善/无法完全显示"，或你想在改版前系统查一遍视觉与可达性。触发词：显示不全、内容被裁切、对比度不够、键盘点不到、窄屏溢出、美学体检。是 全页面回归冒烟法（功能冒烟）的"视觉兄弟"——那个查"能不能用"，本技能查"看不看得出、看全不看全"。

操作步骤

1. 定标尺（国际惯例/设计原则）：① WCAG 2.1 AA 对比度≥4.5:1（大字号≥3:1）；② 内容不被裁切（宽内容可滚动而非挤压/溢出）；③ 键盘可达（所有可交互元素有 :focus-visible 轮廓）；④ 栅格对齐（页头与正文共用同一基线）；⑤ 窄屏可用（不溢出/不重叠/可触摸）。
2. 静态审计（templates.py）：通读 CSS 与渲染层（table()、页头 header、导航、家训条）定位缺陷。
3. D1–D6 已验证修复（按国际惯例落地）：
   - D1 宽表格裁切：.tbl-scroll{overflow-x:auto} + 内层 table{min-width:max-content}，桌面端横向滚动而非挤压；
   - D2 长下拉矮屏裁切：.navitem>.sub/.sub2 加 max-height:calc(100vh-…) ;overflow-y:auto；
   - D3 文字对比度：浅色 --mut 由 #9A8E78 加深到 #6E5E46（≈6.2:1）；
   - D4 键盘可达：为 a/button/input/select/textarea/.mini/.ghost/菜单项/换肤元素 等统一 :focus-visible 轮廓；
   - D5 页头对齐：header .hd,nav,.who{max-width:1040px;margin:auto;padding:0 22px} 与正文 .wrap 同基线；
   - D6 窄屏家训条：flex:1 1 auto;min-width:0 + text-overflow:ellipsis，防溢出。
4. 验证：py_compile 三模块 → 重启 → HTTP 实测关键页含新规则 → 路由冒烟无回归。

注意边界

• 改动严格限定于 templates.py 的 CSS 与渲染层，不碰业务逻辑与导航结构（导航是 2026 锁版定稿区）。
• D5/D6 是布局层，D3/D4 是可达性层，D1/D2 是内容可达层——四层一起才叫"美学体检"，别只改一处。
• 窄屏用 @media 降内距，别靠把内容缩放硬塞。

反例避雷

• 宽表格只加 overflow 不加 min-width → 列仍被压缩变形，照样看不全。
• 对比度只调深色主题 → 浅色主题仍不达标，WCAG 是双主题都要过。
• 给整页加 transform:scale 适配窄屏 → 文字糊、点不准，治标不治本。

关联笔记

• [[技能｜全页面回归冒烟法]]
• [[技能｜前端导航菜单交互改造流程]]
• [[技能｜全流程体检第一原则基线法]]

实战战绩

2026-09-30 落地：以 WCAG 为标尺查 HFMS 外观，修复 D1–D6 共 6 项真实缺陷（含 2 项高严重度"内容无法完全显示"），py_compile + HTTP 实测 + 13 条路由冒烟全过，无回归。

版本记录