布局与自适应

数值 / 代码

侧栏   position: sticky; top: 0; height: 100svh;                 /* 页面会滚的 sticky 列：svh（本页「高度单位按场景分」①） */
       display: flex; flex-direction: column;
       background: var(--glass);                    /* 不透明度.62的玻璃 + 磨砂，视口大小的面 */
       overflow-y: auto;                            /* 兜底：真挤到连导航都不够时整条也能滚 */
品牌   flex: none;                                  /* 钉在上头 */
导航   flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
外观   flex: none;                                  /* 浅 / 深 / 自动、六个色点、版本，钉在下头 */
内容区 大标题 clamp(26px…) 700、字距 -.4px + 灰副标题；
       卡片网格 repeat(auto-fit, minmax(190px, 1fr))；入口用分组列表，不用卡片

用在哪

刷刷、岗岗、plan的桌面形态（card没有侧栏，只有顶栏）。本站侧栏同一个结构：品牌与搜索格在上、外观三行在下，中间的导航单独滚。

为什么

侧栏底部那组是切主题的唯一入口。侧栏按--u等比放大而视口高不跟，刷刷在2040×1019上只剩约24px余量，再挤一点那组就被裁掉，而且不留痕——用户只会以为「没有换色的地方」。刷刷的做法是整条侧栏overflow-y:auto；本站再进一步，只让导航滚，外观控件不用滚就看得见。

数值 / 代码

--fs-title: clamp(26px, 1.4vw + 14px, 34.16px);
--fs-body:  clamp(14px, .15vw + 12.84px, 15px);
--gap:      clamp(10px, 1vw, 14.4px);
--pad:      clamp(18px, .95vw + 14.32px, 28px);
--side-w:   clamp(200px, 17vw, 244.8px);
--page-x:   clamp(16px, 3vw, 43.2px);
/* 上限就是它在1440处的值（1vw = 14.4px），所以 ≤1440与改版前逐位相同；
   每条外面再乘 --scale（下一条），>1440只由等比放大接手 */

用在哪

四个工具与本站外壳的令牌。验收在1440 / 1100 / 900 / 768 / 600 / 390几档，外加960×600@1.5（约等于⌘+150%）断言scrollWidth === innerWidth。

为什么

屋主明确要求跟着他的缩放走。浏览器缩放改的是CSS视口宽，和把窗口拖窄是同一件事：字号、间距既然已经按视口宽插值，缩放就自动对了，不需要监听缩放、也不需要另一套「缩放档」。

数值 / 代码

:root {
  --scale-max: 1.45;                                               /* 唯一的旋钮 */
  --scale: clamp(1, tan(atan2(100vw, 1440px)), var(--scale-max));  /* 视口 ÷ 1440 */
  --u: calc(1px * var(--scale));                                   /* N × --u = 1440处的 N px */
}
--fs-title: calc(clamp(26px, 1.4vw + 14px, 34.16px) * var(--scale));
.nav-item  { height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); }
/* card、刷刷的等价写法：--u: calc(clamp(1440px, 100vw, 2088px) / 1440) */

乘：字号、行高、间距、内边距、圆角、图标、控件高、列表行高、侧栏宽、投影偏移、3D 槽位
不乘：媒体查询断点、1px 分隔线与亮线、backdrop-filter 的 blur 半径、光晕的 vw 尺寸、焦点环2px
不用 CSS zoom，也不用 transform 缩放

用在哪

四个工具统一，本站外壳star.css第2节同一条公式。屋主台式2040拿到1.417（没到封顶，填满和严格等比是同一件事）；笔记本2552触到1.45封顶，多出来的宽度（按本站的令牌算464px）只给卡片与列表轨道吃，所以笔记本上构图比Mac紧一些——这是封顶的主动代价，高分屏上正文的物理大小和Mac差不多。

为什么

屋主在Windows大屏上要「跟Mac一样」：构图不变、整体放大。初版抬clamp上限、≥1600拆多列，字只涨1.13–1.18倍、版面涨1.36倍还多一列，整屏变密，不像同一个设计。公式也必须是「视口÷1440」：刷刷写过1440→2560的线性爬坡，两端对、中间偏小，2040处只有1.241（等比给1.417，大14%），整屏小一圈，就是屋主反复说「刷刷跟Mac差距大」的来源。原则见总览「构图不变，等比放大」。

数值 / 代码

/* 对：只有真不认三角函数时才命中 */
@supports not (scale: tan(atan2(1px, 1px))) {
  :root { --scale: 1; }
  @media (min-width: 1600px) { :root { --scale: 1.11; } }
  @media (min-width: 1800px) { :root { --scale: 1.25; } }
  @media (min-width: 2000px) { :root { --scale: 1.39; } }
  @media (min-width: 2200px) { :root { --scale: 1.45; } }   /* 2400、2560两档也是1.45 */
}
/* 错：CSS.supports('width', 'tan(atan2(1px,1px))') 在 Chrome 实测是 false，
   取反恒真，整个平滑公式被台阶盖掉 */
@supports not (width: tan(atan2(1px, 1px))) { … }

用在哪

四个工具与本站外壳（star.css第2节，紧跟在公式后面）。老内核走台阶，放大不连续但能放大。

为什么

探针要测的是「这条声明能不能成立」。width: 1.417在任何浏览器里都不成立，所以那条探针测不出任何东西；scale: 1.417是合法值，认三角函数的内核里探针为真、不认的为假，not之后才正好只罩住老内核。

数值 / 代码

@media (max-width: 900px) {   /* 侧栏 → 顶栏：品牌 + 横排可滚的导航 + 「更多」；内容单列 */ }
@media (max-width: 600px) {   /* 顶栏只剩品牌；底部 tab bar：玻璃底、顶边亮线、
                                 线条图标 + 短标签、选中项强调色；主题控件在「更多」面板 */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0;
            padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
}
各家 tab bar：刷刷4项（首页 / 专项练习 / 搜题 / 更多）、岗岗3项（目录 / 搜索 / 设置）、
            plan 6项、card 没有（只留品牌图标 + 主题按钮）、本站5项（总览 / 色彩 / 交互 / 收藏 / 更多）

用在哪

四个工具与本站。刷刷的renderNav()一次产出三份导航DOM（左侧栏、底部tab bar、「更多」层），本站的nav.js也一样，全靠CSS断点显示哪一份。

为什么

900是SPEC给四个工具定的统一断点（岗岗从820改过来）。断点按CSS像素判，浏览器缩放时自然跟着走；它管的是「这一档用哪种形态」，不属于构图，所以不乘--u（媒体查询里本来也写不了var()）。

数值 / 代码

@media (max-width: 600px) {           /* 600以上逐像素不变；需要 DOM 配合的地方桌面上 display:none */
  .sidebar { display: none; }          /* 只剩「品牌 + 刷刷」的56px白带：整条不要 */
  .page-title::before { … }            /* 品牌图标挪进每页大标题前：30px、圆角9，同一个图案文件 */
  .stats { grid-template-columns: 1fr 1fr; }   /* 四张统计卡2×2，去小字和图标、数字20px */
  .search-selects { grid-template-columns: 1fr 1fr; }   /* 两个下拉并排；select 宽100% + 省略号 */
  .more-sheet { bottom: …; max-height: calc(100svh - …); overflow-y: auto; }   /* 封顶用 svh */
              /* 不能再写 top：top 与 bottom 同时给定，网格把每一行拉高
                 （417×750下：面板414 → 672px，每项44 → 73px） */
}
触控目标 ≥44px；env(safe-area-inset-*) 全程带着

用在哪

刷刷3.11.x起的手机档（屋主在手机上提的六条）。本站的「更多」面板≤600也是从底部往上长、只写max-height。

为什么

手机上竖向是最贵的：tab bar已经有了导航、「更多」里已经有了主题控件，顶上那条白带只剩品牌，换来的是首屏少一张卡。首页不堆信息：统计卡收成2×2，「随机20题」这类二级入口不放手机首页。

数值 / 代码

@media (max-width: 600px)        /* 桌面与601–900的顶栏不动 */
.topbar.topbar-phone { flex-direction: column; align-items: stretch; gap: var(--sp-2);
                       padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
第一行  切库「工作 | 生活」 ………… 搜索 · 铃铛 · 新建（38×38，新建是主按钮渐变的加号）
第二行  大标题 + 日期，flex-wrap 基线对齐；放不下日期换行，不截断
搜索    点了才在两行之间展开（顶栏90 → 134px）、autoFocus；
        回车搜完收起；Esc、「取消」收起不搜；先判 isComposing，选词的回车不算
焦点环  框子 .search-box:focus-within 画一圈；.search-box input:focus-visible { outline: none; }
量出来  宽390 / 417：顶栏167 → 90px，第一条任务 y = 412 → 334

用在哪

plan≤600的顶栏（TopBar）。本站的搜索框焦点环也是只画在整只框上（:focus-within），里面的输入框不另画。

为什么

改前三行167px：标题＋日期＋切库｜整行搜索框｜铃铛＋「新建任务」；再加汇总卡和快速记录，第一条任务要到y=412才露头。常用的三件事收成图标，搜索按需展开，第一条任务提到334。

数值 / 代码

.sidebar-tiles { display: grid; grid-template-columns: 1fr 1fr; }   /* 仍是2×2 */
.sidebar-tile  { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.sidebar-tile-icon  { color: var(--tile-ink); }   /* 16px 线条图标；今天 强调色文字档、逾期 红、本周 橙、收件箱 青 */
.sidebar-tile-label { flex: 1 1 auto; font-size: var(--fs-13); font-weight: 400; }
.sidebar-tile-count { font-size: var(--fs-15); font-weight: 600; color: var(--text-title); }
.sidebar-tile.is-zero  .sidebar-tile-count { color: var(--text-muted); font-weight: 400; }   /* 这两处原写500，字重收三档后归400 */
.sidebar-tile.is-alert .sidebar-tile-count { color: var(--danger-500); }   /* 只有逾期 > 0 */
量出来  宽1440：磁贴区227 → 78px、单块109 → 35px，导航第一项 y = 363 → 214；
        宽2040：磁贴区321 → 111px；数字24 → 15px，汇总卡大数字56px（差回到三倍多）

用在哪

plan侧栏（>900）与601–900顶栏里横排的磁贴（横排单块44→30px）。彩色图标块那套样式只有磁贴在用，一并从plan删了；刷刷、岗岗、card的列表行还在用它，见交互页「入口用分组列表」。2026-10-10 plan字重收成三档（61282be），磁贴名和为0的计数从500改成400，见排版页「字重三档」。

为什么

屋主对照SuperTodo说一眼抓不住重点。诊断第4条：1440首屏最显眼的依次是「新建任务」按钮、侧栏四块磁贴（24px数字＋四色图标）、台历，正文排在后面，汇总卡的大数字反而被抢了。图标仍按类上色、不改成灰的：屋主说过不要灰的。

数值 / 代码

@media (min-width: 901px) and (min-aspect-ratio: 1601/1000),
       (min-width: 901px) and (max-height: 899.98px) {
  .side       { gap: 0; padding-top: calc(12 * var(--u)); padding-bottom: calc(8 * var(--u)); }  /* 18 / 14 → 12 / 8 */
  .brand      { padding-top: 0; padding-bottom: calc(8 * var(--u)); }                             /* 14 → 8 */
  .nav-item   { height: calc(28 * var(--u)); }                                                    /* 34 → 28 */
  .side-group { margin-top: calc(6 * var(--u)); margin-bottom: calc(2 * var(--u)); }              /* 12 / 4 → 6 / 2 */
  .theme      { gap: calc(6 * var(--u)); }                                                        /* 10 → 6 */
  …搜索格、外观分段的上下内边距同样收一档
}
实测（软件渲染 DPR 1.25）：2040×1019、2040×930两档11项导航和外观控件全看得见、导航不滚；
最后一组下面还空着：1019那档约130px、930那档约40px

用在哪

本站侧栏（>900）。屋主台式2040×1019、带浏览器工具栏实际是2040×930，笔记本2552×1274，三档都比1440×900扁。

为什么

等比放大只管横向：侧栏按--u放大，竖向也跟着放大，可视口高没有跟着涨。刷刷当年否掉过「竖向单独压缩--u-y」——压竖向就是把构图改扁；所以这里不动内容区（照旧等比、照旧滚），只让侧栏这一块一屏高的面把竖向节奏收紧。条件用宽高比：宽≥1440时有效高＝高×1440÷宽，比900矮就等价于宽高比大于1.6；1440×900正好1.6、高900，两条都不中，一个像素不变。

数值 / 代码

@media (min-width: 821px) {
  .hall {
    --card-room-h: calc(100svh - 66px - clamp(24px, 4svh, 52px) - clamp(44px, 8svh, 88px));
                   /* 小屋代码现状写的是4vh / 8vh（裸 vh）；按「裸 vh 不许」该换 svh，还没改 */
    --card-u: clamp(440px,
                    min(calc(0.3514 * 100vw + 202.064px), calc(1.3231 * var(--card-room-h))),
                    900px);
    --card-px: calc(var(--card-u) / 708.08);      /* 「一个 1440×900 像素」，那一档正好1px */
  }
}
.blob__big  { font-size: calc(136 * var(--card-px)); }                  /* 系数就是1440×900下的像素值 */
.blob       { padding: calc(58 * var(--card-px)) calc(64 * var(--card-px)) calc(52 * var(--card-px));
              width: fit-content; }                                      /* 色块宽由两个字撑出来 */
.plate      { width: calc(281.6 * var(--card-px)); padding: calc(15.84 * var(--card-px)); }
.hall__card { border-radius: calc(46 * var(--card-px)); }
宽度法则过两点（1030→564、1440→708.08）；高度保险 = 卡最多吃掉可用高的72%；
上界900是画的分辨率（源图636宽）；下界440。1px 发丝线、倾斜角、字距行高不缩放。

用在哪

小屋门厅，以及工具页、随笔页门面那两张同款卡（两份样式表逐字相同）。门厅首屏就是这张卡，静态档（没有JS、减弱动效、≤900、省流量、WebGL不可用）是一屏、不能滚。≤820那一档不认--card-u，见下一条。

为什么

以前巨字、内边距、右半宽各吃一条斜率不同的vw clamp，卡越小越方（长宽比1.868→1.746），缩放的不是同一张卡。现在一个自由量，1440×900按定义逐像素不变；矮窗口里高度保险接手，1440×460以前溢出视口15.9px，现在卡片自己收到440.8×241、离底还有86px。

数值 / 代码

@media (max-width: 820px) {
  .blob { flex: 1 1 auto; min-width: 0; width: auto;       /* 定尺寸策略反过来：右半先定，色块吃剩下的 */
          padding: clamp(20px, 5.6vw, 40px) clamp(12px, 3.8vw, 34px) clamp(18px, 4.6vw, 34px); }
  .blob__whose { font-size: clamp(10.5px, 3vw, 13px); letter-spacing: .16em; margin-bottom: 6px; }
  .blob__big   { font-size: clamp(40.25px, 11.5vw, 84px); white-space: nowrap; }
  .blob__foot  { margin-top: clamp(12px, 3.4vw, 22px); padding-top: clamp(10px, 2.6vw, 16px);
                 font-size: clamp(10.5px, 3vw, 13px); letter-spacing: .04em; }
  .plate       { width: clamp(100px, 30vw, 206px); padding: clamp(6px, 1.8vw, 10px); }
  .hall__card  { border-radius: clamp(20px, 5vw, 30px); }
  .deco--pot   { display: none; }                         /* 往卡外挂的盆栽在窄屏收起 */
}

用在哪

小屋门厅与两个门面，≤820。≤560没有门厅相关的进一步收小档：上面这些clamp的下界（40.25px巨字、100px右半、20px圆角）已经兜住320宽。巨字下限和副标题字距是2026-10-08第二轮定的（原来38px、.08em）：门面副标题「六件自己做的东西」8个字，.08em时窄屏只放得下7个、把色块撑宽。

为什么

原方案≤820转纵向（色块上、画下），屋主否了。那幅水彩是636×900的竖幅，窄右半正合适；一转纵向，画横过来铺满卡宽，要靠max-height硬砍高度，门厅从「一张挂画」变成「一张海报压着一块色块」。

数值 / 代码

轨道   .rail  { min-height: calc(100svh + var(--rail-end) * 1svh); }   /* --rail-end = 最后一层的 hold-end = 352 */
舞台   .stage { position: sticky; top: 0; min-height: 100svh; display: grid; }  .layer { grid-area: 1 / 1; }
时间表（单位 svh；d = 滚进轨道的距离，轨道顶碰到视口顶为0）
       门面：0 → 12（没有入场）    01 · 日程安排：52 → 112    02 · 刷刷：152 → 192
       03 · 岗岗：232 → 272        04 · card：312 → 352（最后一层：hold-end 就是轨道终点，不退场）
淡入淡出  右栏 --fade 32、文案 --copy-fade 22、门面退场 (32 + 22) / 2 = 27
       入场 t = clamp(0, (d − hold-start) / fade + 1, 1)；退场 t = clamp(0, (d − hold-end) / fade, 1)
       两条都过 smoothstep（两端零速度；不用 ease-out，它起点最快，一碰滚轮内容就往上窜）
在场   present = enter × (1 − exit)
位移   文案 translateY((1 − enter) × 26px − exit × 26px)；图 (1 − enter) × 42px − exit × 34px
接指针 只有 data-tool-active 那层（present 最大的；交接正中打平时给后一层），其余 pointer-events: none
进度   脚本只写一个 --rail-progress（0 → 1），几何全在样式表

用在哪

小屋/projects的「展台」（有3D展品的四件）。没有3D展品的travel与设计合集不进轨道，摆在轨道之后的「小架」上（2026-09-28），舞台放开后接着滚到，小架最后一件就是页底。每个工具只有「打开」那一条链接可聚焦，见交互页「每个工具恰好一个Tab位」。

为什么

改前门面和三个工具各占一段、每段一个自己的舞台，「上一件完全显示→下一件完全显示」要滚142svh（1440×900下1278px），中间约一屏是空白的纸，屋主反馈切换不自然、间距太长。一条轨道之后交接只要40svh，两套文案只在交接正中4svh里同时出现、且都淡到0.025以下。最后一层的退场从hold-end起算，轨道到不了那之后，所以它结构上就不会退场。

数值 / 代码

/* 默认：竖排页，不钉住、不擦洗；三张界面图竖排 */
.layer { … }

/* 增强只写在这一个媒体查询里 */
@media (scripting: enabled) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .rail  { min-height: calc(100svh + var(--rail-end) * 1svh); }
  .stage { position: sticky; top: 0; display: grid; }
  .layer { grid-area: 1 / 1; pointer-events: none; }
  .layer[data-tool-active] { pointer-events: auto; }
  /* 时间表的数字也只写在这里：竖排页读到的是 NaN，读法返回 null，意思就是「此刻没有叠放」 */
}

用在哪

小屋工具页（tools.module.css文末那一个媒体查询）。禁用脚本、不认scripting这个特性的老浏览器、窄屏、减弱动效四种情况，第一帧就是这张竖排页。

为什么

页面里不另写内联脚本（CSP的script-src只认构建时逐页算出的sha256哈希），「脚本能不能跑」只能交给scripting这个媒体特性来判。增强是加上去的一层：判断不出来、条件不满足，留下的就是能读的那一页——小屋「降级的终点就是今天那一页」同一个思路。

数值 / 代码

.notes   { display: grid; grid-template-columns: fit-content(280px) minmax(0, 1fr);
           gap: clamp(30px, 4.4vw, 60px); align-items: start; }
@media (max-width: 900px) { .notes { grid-template-columns: minmax(0, 1fr); } }   /* 日记卡本身没有断点 */
#entries { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); } /* 靠间距分隔，没有发丝线 */
.entry   { background: #FDFCF9; border: 1px solid var(--border); border-radius: 14px;
           padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 22px); }
.entryAvatar { width: 30px; height: 30px; border-radius: 9px; }  /* 头像是图（2026-09-02起），图挂了露色块底 */
.entry__day  { color: var(--xw-lava); }                            /* 「10月8日 · 星期四」，熔岩橙 */
.entry__text { white-space: pre-wrap; overflow-wrap: anywhere; }   /* 纯文本直出，不截断、不做摘要 */
没有卡内分隔线、阴影、标题、摘要

用在哪

小屋/notes。正文的段首缩进、行距这些排法归排版章（随笔「中文论文排法」）。

为什么

旧列表「标题＋摘要＋时间竖线」把随手写的一句话包装成文章，读起来像博客归档，不像屋主自己的本子。左栏fit-content(280px)：说明一句话时左栏就窄，换成长句就长到280封顶，永远不为凑一个固定宽度留空白。正文不截断：卡上唯一的链接是右上那块日期，它已经是「进详情页」的意思，再截断就得再造一个「展开」开关。

数值 / 代码

固定尺寸只在图形元件上：顶栏 min-height 66px（≤560 58px）、图标方块46 / 54 / 48、头像30×30、
                       边框1 / 2 / 3px、textarea min-height 108、<img width="636" height="900">
内容容器的手法：min-height（.shell { min-height: 100svh }）、fit-content（色块、随笔左栏）、
               align-items: stretch + max-height: 100%（画跟着色块取高）、clamp()（40余处）、minmax(0, 1fr)
禁止：内容容器上的 height、max-height；用 overflow: hidden 掩盖溢出；-webkit-line-clamp 固定行数省略；
      position: absolute 摆主内容（只有绿植装饰可以）；百分比 padding-bottom 撑宽高比

用在哪

小屋全站，六条原则第4条。全站唯一一处max-height是门厅画的max-height:100%——它不是限高，是「画跟着色块等高」那套机制的一部分。拿overflow:hidden藏溢出只有一个例外：body的overflow-x，用来兜住装饰；门厅卡上那个overflow:hidden是裁圆角，不是藏溢出。

为什么

内容会变：题库会加题、随笔会变长、工具说明会改写、字体在不同系统上宽度不一。任何一处写死高度，都会在某台设备上把字截掉或留一块死白。

数值 / 代码

/* ① 页面本身会滚：首屏、门面舞台、sticky 舞台、滚动轨道长度 → svh */
.hero  { min-height: 100svh; }
.stage { position: sticky; top: 0; min-height: 100svh; }
.rail  { min-height: calc(100svh + var(--rail-end) * 1svh); }   /* 地址栏伸缩时长度不变，时间表不跳 */

/* ② 叠在页面上、要正好盖满可见区：全屏弹层、底部抽屉、整页不滚只在内部滚的应用外壳 → dvh */
.overlay { position: fixed; inset: 0; height: 100dvh; }
body.shell { height: 100dvh; overflow: hidden; }            /* 页面不滚，只在里面滚 */

/* ③ 各种封顶 → svh，按地址栏露着的最坏情况 */
.sheet { max-height: calc(100svh - 40px - env(safe-area-inset-top)); }

/* ④ 裸 vh 一律不许：手机上它按地址栏收起时算（903），露着时多出153px压到屏幕外 */

/* 内容尺寸：等比项与可用高度项取小，可用高度是封顶，用 svh */
min-height: clamp(<下限>, min(calc(<系数> * var(--u)), calc(100svh - <这一屏上其余各块>)), <上限>);

用在哪

本站已照这四条改完（2026-10-08）：body的最小高与侧栏只写svh，不再接一行dvh；「更多」面板、kit居中与底部弹层、照片区的封顶都是svh，原来的dvh、裸vh和100vh兜底行都删了。小屋2026-10-09也照这四条改完了规格和代码（规格11.6「视口单位的四条」，仓库里加了永久门禁）。

为什么

地址栏只在手机上滚动时伸缩。会滚的页面里用dvh，地址栏一收，首屏、舞台、轨道跟着长153px：手指底下的内容往下跳一截，按「滚了多少svh」写的时间表也被拉长、倒回去一段。盖满可见区的东西用svh，地址栏一收，底下就露出153px的缝，看得见后面的页面。封顶要在地址栏露着时也放得下，所以按小的那个svh算；裸vh手机上按地址栏收起时算，露着时就压到屏幕外。来历：两份记录原来说法相反——控制室记录（2026-09-23）写「一屏容器用100dvh、各种封顶用svh」，小屋规格写「占满一屏的容器用100svh、内容尺寸的兜底上限用100dvh」；控制室2026-10-08按场景定成上面四条：会滚的照小屋规格用svh，盖满可见区的用dvh，封顶照控制室记录用svh。

数值 / 代码

 1、祖先带 backdrop-filter / filter / transform 时，position: fixed 改以它为参照
    → 玻璃卡里要贴底贴顶一律 position: sticky; bottom: 导航高 + 8u；非要 fixed 就挪出玻璃卡
      （演示框里用一个静态 transform 代替磨砂：同一条规则，框里不新增 backdrop-filter）
 2、min-height 的 grid 默认 align-content: stretch，多余空白平均分给每一行 → align-content: start
 3、列 flex 里 margin: auto 顶掉 stretch，子项缩成内容宽 → 显式 width: 100%
 4、flex 两个兄弟各挂一个 margin-left: auto，剩余空间被均分 → 先合成一个右侧组再整体靠右
 5、百分比 padding 参照包含块的宽（品牌字在内约200px），padding: 8% 把34px的图标压到2px
    → 尺寸写死成 calc(var(--brand-box) * .84)
 6、单行输入的值不含换行，浏览器直接吞掉 \n → 「第一行当标题」用 rows="1" 的 <textarea>
 7、figure 默认 margin: 1em 40px → reset 那一行要有 figure：p, h1, h2, h3, ul, ol, li, figure { margin: 0; }
 8、overflow-x: hidden 不显示滚动条，但挡不住 scrollWidth 被顶大（iOS 照样能左右拖）
    → 锚在 right: 0，要往外挪用 right: clamp(0px, 5vw, 84px)；往外挂的装饰必须有收起的断点
 9、overflow: hidden 裁圆角的卡会把挂在它身上的装饰一起裁掉 → 装饰挂在外面那一层
10、只有一行 auto 的 grid，格子不定高，子元素 max-height: 100% 算不出来
    → max-height: calc(100svh - 40px - env(safe-area-inset-top))（封顶用 svh，不再补一行裸 vh）
11、吸顶顶栏的高度只让 html 的 scroll-padding-top 管一次；条目的 scroll-margin-top 只留12px

用在哪

①刷刷「开始练习」底栏（3.11.0–3.12.0手机上滚动途中看不到、滚到底盖住最后一组36px）、plan「更多」面板；②plan的.app-shell（顶栏形态下侧栏那行凭空长出两百多像素）；③card画廊（整条舞台从950缩到594）；④plan分组小标题的动作链接与计数；⑤岗岗品牌图标；⑥plan笔记页「记一条」；⑦⑧⑨小屋门厅；⑩本站的底部弹层（更新记录面板撑到2849px）；⑪本站601–900宽的锚点（768下顶栏下面空76px）。

为什么

这些都不报错，常常只在某一档宽度、滚到中途、或者换一台机器才露馅：只看页面顶部截图、只在开发机上看，三轮验收都没发现第1个。所以每个修法都配了量法：量滚动顶中底三处的位置、量scrollWidth、量计算样式，不靠目测。