首屏打字机改为固定字号 + CSS 光标,并修掉首屏白屏
按 Firefly banner 的做法重做,三件事:
1) 字号固定,不随句子长度变
- 文案从 4 句(14/11/4/4 字,差 3.5 倍)压成 2 句长度接近的王小波
- 字号用 text-[clamp(1.125rem,5.6vw,4rem)],只跟视口缩放
· 手机 390px → 21.8px(15 个字一行刚好放得下)
· 桌面 1280px → 64px(比 Firefly 的 3rem 更大更醒目)
- 容器 max-w-4xl(896px) → max-w-5xl(1024px):15 字 × 64px = 954px,4xl 装不下
- 实测 320/360/390/430/640/768/1024/1280/1920 全部放得下,无溢出
2) 光标改成 CSS ::after
- 删掉整套运行时测量:measureRef / designRef / fontSize state /
fitFontSize / ResizeObserver / CURSOR_EM / CURSOR_GAP_PX / 两个隐藏量具
- hero.tsx 298 → 208 行,两个文件净减 52 行
- 顺带消除测量误差,光标跟着字号自动缩放
3) 去掉和打字机重复的 Flannery O'Connor 引语
另外修掉两个自己发现的问题:
- 【真 bug】首屏在 JS 加载前是隐形的
SSR 出来的包裹层带 opacity-0,要等 React hydrate 才变可见,
慢网络下第一屏是白屏、LCP 被拖后。改成 CSS 入场动画(.hero-enter),
SSR 即可见;顺带删掉只为它存在的 mounted state
- 【算错】第一版 clamp 封顶写了 4.25rem(68px),但容器 896px 装不下
1013px,≥1280px 会溢出。一起修掉了
验证:pnpm build 退出码 0;dist 里已无 hero-cursor span、无隐藏量具、
无 Flannery 引语,h1 class 为 hero-typewriter + clamp 字号
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"updatedAt": "2026-09-15T10:00:22.188Z",
|
||||
"updatedAt": "2026-09-16T09:46:47.801Z",
|
||||
"source": "weread",
|
||||
"books": [
|
||||
{
|
||||
@@ -8,12 +8,12 @@
|
||||
"author": "布尔加科夫",
|
||||
"category": "文学-外国文学",
|
||||
"cover": "https://wfqqreader-1252317822.image.myqcloud.com/cover/299/26678299/t6_26678299.jpg",
|
||||
"progress": 30,
|
||||
"progress": 31,
|
||||
"finished": false,
|
||||
"lastReadAt": "2026-09-13T15:08:26.000Z",
|
||||
"lastReadAt": "2026-09-15T16:12:26.000Z",
|
||||
"startedAt": "2026-09-04T16:07:07.000Z",
|
||||
"finishedAt": null,
|
||||
"readingSeconds": 4030,
|
||||
"readingSeconds": 4209,
|
||||
"deepLink": "https://weread.qq.com/book-detail?type=1&v=34c329807197141b34cf1db"
|
||||
},
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user