应优先使用@supports not (horizontal-viewport-segments: 2)前置判断，避免CSS Level 4范围语法与旧规则冲突；horizontal-viewport-segments描述渲染管线状态，非设备形态，二者语义层级不同。
不能用 CSS Level 4 范围语法（如 (width ）直接判断折叠屏状态——它只做数值比较，不感知物理分屏结构，误判率极高。
为什么 (width 在折叠屏上基本失效
折叠屏展开后，window.innerWidth 可能仍是 ~390px（单侧 viewport 宽度），而系统总宽其实是 ~780px。Level 4 范围语法读的是渲染后的视口值，不是设备物理能力。
@media (width 会把 Z Fold 展开态当成“小屏”，导致双栏布局根本不出-
@media (width > 720px)则可能在平板、横屏手机甚至笔记本上误触发，样式污染非折叠设备 - 该语法不支持
horizontal-viewport-segments这类新特性，无法组合使用
@media (horizontal-viewport-segments: 2) 才是真折叠信号
这是目前唯一由浏览器直接上报的物理分屏状态，Chrome/Edge 119+ 稳定支持，值为 2 表示系统已启用双视口渲染。
- 竖折设备（Z Fold、Mate X 系列）展开 → 匹配
(horizontal-viewport-segments: 2) - 横折设备（Z Flip、Pocket 系列）展开 → 改用
(vertical-viewport-segments: 2) - 必须包裹在
@supports (horizontal-viewport-segments: 2)内，否则 Safari/Firefox 会跳过整条规则 - 别混写：
@media (min-width: 768px) and (horizontal-viewport-segments: 2)是逻辑矛盾——前者看总宽，后者只在单侧渲染时为真
Level 4 范围语法只能当 fallback 辅助手段
当 horizontal-viewport-segments 不可用时，可用 Level 4 范围语法做粗筛，但需叠加条件防误判。
- 折叠态兜底：
@media (width = 600px)（覆盖多数折叠态宽度） - 展开态兜底：
@media (width >= 720px) and (height >= 840px) and (min-aspect-ratio: 1/2)（排除竖屏大屏干扰） - 永远加
@supports not (horizontal-viewport-segments: 2)前置判断，避免新旧规则打架 - 注意：这些组合在华为 HarmonyOS Webview 或旧版 Android WebView 中仍可能因 UA 欺骗或 viewport 错位失效
真正难的不是写对一条媒体查询，而是理解 horizontal-viewport-segments 描述的是渲染管线状态，不是设备形态；而 Level 4 范围语法只是数字快照——两者语义层级不同，强行混用等于拿尺子量温度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
