容器查询在穿戴设备上完全不可用，因Wear OS和watchOS均未实现@container语法，实测会被浏览器直接忽略；替代方案仅限@media单一断点，布局须基于视口、强制固定尺寸、精简DOM至50节点内。
极小屏幕（如智能手表）不能靠容器查询（@container）解决适配问题——它根本不被支持，且会拖慢渲染。
为什么容器查询在穿戴设备上完全不可用
Wear OS 使用滞后版 Chromium（v115–v120），watchOS 基于 Safari 16.4+，二者均未实现 @container 查询语法。实测中声明 @container (min-width: 300px) 会被整个忽略，CSSOM 解析失败，且触发额外样式重计算开销。这不是“没生效”，而是浏览器直接跳过该规则块。
- 替代方案只有
@media，且必须严格限定为单一断点：@media (max-width: 450px) and (max-height: 480px) - 所有布局决策必须基于视口，而非父容器尺寸——因为 DOM 深度被硬性限制 ≤3 层，根本不存在可查询的嵌套容器上下文
- 试图用 JS 模拟容器查询（监听
ResizeObserver）会突破 300ms 首屏渲染红线，导致手环端白屏超时
真正有效的微调布局三原则
不是“让布局变灵活”，而是“砍掉所有弹性假设”，强制每个元素具备确定尺寸和位置。
- 所有宽度用
px（非rem、%或vw）：系统字体缩放、DPI 补偿在穿戴端不可控，14px正文 +16px标题是唯一稳定值 - 点击区域靠
padding扩展，不用min-width/min-height：Apple HIG 要求44px × 44px，Material You 要求48dp × 48dp，直接写死padding: 12px（配合font-size: 14px刚好撑满） - 禁用
flex-wrap和grid-auto-flow：换行逻辑在 390×450 屏幕上无法预测，所有布局必须单行/单列硬编码，超出部分用overflow: hidden截断
DOM 结构精简到只剩骨架
语义标签、空节点、隐藏但未销毁的 DOM 全部是性能毒药。你不是在写网页，是在喂一个资源极度受限的渲染器。
立即学习“前端免费学习笔记（深入）”；
- 只保留
<header>和<main>，其余一律用<div>；<section>、<article>、<aside>全部移除 - 总节点数必须
< 50：一个带图标的按钮 = 3 节点（<div>+<span>+<svg>），列表项每条最多 4 节点 - 图片必须内联为
data:image/svg+xml;base64,...或使用系统图标字体；<picture>、srcset、loading="lazy"全部禁用——它们会触发异步加载队列，卡住主线程
复杂点不在 CSS 写法，而在取舍：你得亲手删掉 70% 的 HTML 节点、关掉所有现代 CSS 特性、放弃“优雅降级”幻想，才能换来那 300ms 内的首帧渲染。这不是妥协，是物理限制下的必然路径。
