docs(readme): sync adaptive section to authoritative AGENTS.md + audit result

This commit is contained in:
km2023
2026-06-30 16:18:20 +08:00
parent 8e86e22ad2
commit 356ab3c3a0

View File

@@ -48,17 +48,17 @@ Android 打 APK 需要 JDK 17 + Android Studio + `ANDROID_HOME`,详细步骤见
## 当前进度(自适应改造) ## 当前进度(自适应改造)
正在把全站从「固定比例画布 + 百分比绝对定位」改造为「540 宽标准移动布局」,解决**手机宽度变化导致布局错乱**的问题。 全站自适应采用**分层解耦**:背景美术留在 9:16 画布(`object-cover` 铺满、边缘可裁),UI(对话框 / tab / 图标 / 头像)锚定视口容器、不随宽度漂。解决**手机宽度变化导致 UI 错位 / 漂移**的问题。
-**首页** `src/pages/home-page.tsx`:540 容器居中、去手机外壳、底部 tab 贴屏幕底 -**首页** `src/pages/home-page.tsx`:背景视频 + 立绘在 9:16 画布;tab + 对话框已锚屏幕(画布外)——**已改对的样板**
- ⚠️ 首页 tab 样式仍在和需求对齐中(早期方案绕复杂了,正收敛到最简逻辑) - ✅ **自适应规范**已沉淀为权威版 `vtubermini/AGENTS.md`(分层心法 + 判断 3 步 + 反面教材 + 验证法)——同事用 codex 调任何页照此执行
- ✅ **自适应规范**已沉淀到 `vtubermini/AGENTS.md`(三条规则 + 两个亲测的坑 + 验证方法)——后续同事用 codex 调其他页照此执行,保证全站做法统一 -**全部页面已审查**:其余 18 页均合规(只有 home 曾用 9:16 画布致 UI 漂、已修);后续新页面 / 改动遵循 `AGENTS.md` 即可
-**其他页面**(anniversary / shop / my / album / pet …)待逐页按规范调整
核心规则(详见 `vtubermini/AGENTS.md`): 核心规则(详见 `vtubermini/AGENTS.md`):
1. 容器宽 `min(100vw, 540px)` 居中; 1. **分层**:美术(背景 / 立绘)留 9:16 画布 `object-cover` 铺满;UI(对话框 / tab / 图标)锚视口容器(`.device-stage` / `h-full`),**绝不挂进画布**;
2. **不用百分比绝对定位**(宽度一变就乱)——用 flex / 文档流 + 贴边; 2. 别在 9:16 画布里用百分比纵向定位(`bottom-[X%]` 随宽度漂);
3. 导航 tab 贴屏幕底。 3. 关键尺寸写 inline style 用 `vw/vh/min()`;
4. 改完换 360 / 400 / 540 实测 UI 距屏幕底 px 不变。
## 关键文档 ## 关键文档