docs(readme): sync adaptive section to authoritative AGENTS.md + audit result
This commit is contained in:
16
README.md
16
README.md
@@ -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 贴屏幕底
|
||||
- ⚠️ 首页 tab 样式仍在和需求对齐中(早期方案绕复杂了,正收敛到最简逻辑)
|
||||
- ✅ **自适应规范**已沉淀到 `vtubermini/AGENTS.md`(三条规则 + 两个亲测的坑 + 验证方法)——后续同事用 codex 调其他页照此执行,保证全站做法统一
|
||||
- ⬜ **其他页面**(anniversary / shop / my / album / pet …)待逐页按规范调整
|
||||
- ✅ **首页** `src/pages/home-page.tsx`:背景视频 + 立绘在 9:16 画布;tab + 对话框已锚屏幕(画布外)——**已改对的样板**
|
||||
- ✅ **自适应规范**已沉淀为权威版 `vtubermini/AGENTS.md`(分层心法 + 判断 3 步 + 反面教材 + 验证法)——同事用 codex 调任何页照此执行
|
||||
- ✅ **全部页面已审查**:其余 18 页均合规(只有 home 曾用 9:16 画布致 UI 漂、已修);后续新页面 / 改动遵循 `AGENTS.md` 即可
|
||||
|
||||
核心规则(详见 `vtubermini/AGENTS.md`):
|
||||
1. 容器宽 `min(100vw, 540px)` 居中;
|
||||
2. **不用百分比绝对定位**(宽度一变就乱)——用 flex / 文档流 + 贴边;
|
||||
3. 导航 tab 贴屏幕底。
|
||||
1. **分层**:美术(背景 / 立绘)留 9:16 画布 `object-cover` 铺满;UI(对话框 / tab / 图标)锚视口容器(`.device-stage` / `h-full`),**绝不挂进画布**;
|
||||
2. 别在 9:16 画布里用百分比纵向定位(`bottom-[X%]` 随宽度漂);
|
||||
3. 关键尺寸写 inline style 用 `vw/vh/min()`;
|
||||
4. 改完换 360 / 400 / 540 实测 UI 距屏幕底 px 不变。
|
||||
|
||||
## 关键文档
|
||||
|
||||
|
||||
Reference in New Issue
Block a user