折叠屏响应式需用screen-spanning媒体特性判断形态、容器查询实现组件自适应、env()规避hinge区域，三者缺一不可；传统width媒体查询因viewport不统一而失效。
折叠屏的 viewport 并不统一，width 媒体查询会失效
很多开发者一上来就写 @media (max-width: 768px)，结果在 Galaxy Z Fold 系列或 Pixel Fold 上完全不触发——因为折叠状态下浏览器报告的 window.innerWidth 是展开后的逻辑宽度（比如 2208px），不是物理折叠屏的单侧宽度。Chrome 和 Samsung Internet 会把折叠状态下的 viewport 拉满，width 媒体查询根本无法区分“单屏模式”和“双屏模式”。
真正可靠的是 screen-spanning 和 display-mode 这类折叠专属媒体特性：
-
@media (screen-spanning: single-fold-vertical)：只在垂直中折、单 hinge 的设备上匹配（Z Fold / Pixel Fold 主流形态） -
@media (screen-spanning: none)：折叠态单屏显示时生效（此时你才该用传统断点） - 注意：
screen-spanning目前仅 Chromium 内核（Chrome ≥119、Samsung Internet ≥24）支持，Safari 和 Firefox 尚未实现
container-query 比媒体查询更适合折叠屏内容自适应
媒体查询靠屏幕尺寸，但折叠屏里同一页面可能跨两个物理区域，DOM 结构才是真实上下文。用容器查询让组件自己响应其父容器宽度，比监听全局 window 更鲁棒。
示例：一个卡片组件在单屏下占满，在双屏下自动分栏：
立即学习“前端免费学习笔记（深入）”；
.card-grid {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
- 必须给父容器设
container-type: inline-size，否则@container不生效 - 不要依赖
width媒体查询去控制同一组件在不同折叠态下的布局，优先改用容器查询 - 目前 Safari 16.4+、Chrome 110+、Firefox 119+ 支持，兼容性比
screen-spanning更好
用 env() 读取折叠 hinge 区域，避免内容被遮挡
折叠屏中间有物理 hinge，部分机型（如 Z Fold4/5）提供 env(fold-top)、env(fold-left) 等环境变量，可用来避开 hinge 区域排版。
例如：防止按钮刚好落在 hinge 上：
.action-bar {
padding-inline: env(fold-left, 0px) env(fold-right, 0px);
margin-top: env(fold-bottom, 0px);
}
- 这些
env()变量只在折叠态且支持设备上返回非零值，其他设备回退为 0 —— 安全可用 - 目前仅 Samsung Internet 和 Chrome Canary（需开启 flag）支持，生产环境建议配合
@supports (env(fold-left))使用 - 别试图用 JS 动态计算 hinge 位置：不同厂商 hinge 宽度、偏移、是否居中都不一致，CSS 环境变量是唯一标准化方案
折叠屏没有“通用断点”，device-width 不等于可用宽度
所谓“Foldable 720px 断点”是误导。Z Fold5 展开后单屏逻辑宽度是 904px，Pixel Fold 是 720px，但它们的 hinge 位置、安全区域、系统 UI 占用高度都不同。硬编码断点必然漏 case。
- 放弃
max-device-width：它返回的是设备像素宽度，不是 CSS 像素，也不反映折叠态 - 不用
orientation判断：折叠屏可在横屏下保持单屏，也可在竖屏下展开为双屏 - 真正要监听的是
window.matchMedia对screen-spanning的实时变化，再结合resize事件做降级 - 复杂布局建议用 CSS
subgrid或aspect-ratio配合容器查询，而非固定像素值
折叠屏响应式最难的不是写多少规则，而是接受“没有统一尺寸”这个事实。最稳妥的路径是：用 screen-spanning 做形态判断 + @container 做组件自适应 + env() 做 hinge 规避，三者缺一不可。任何想靠一套媒体查询覆盖所有折叠屏的想法，都会在真机测试第一天就失败。
