如何在CSS中引入针对折叠屏的样式_利用screen-spanning媒体查询特性-css教程-PHP中文网

screen-spanning 不是标准 CSS 媒体特性，目前不存在；Chrome/Edge 119+ 正式支持的是 horizontal-viewport-segments 和 vertical-viewport-segments，用于检测折叠屏双视口状态，配合 spanning 特征识别跨铰链渲染行为。

如何在css中引入针对折叠屏的样式_利用screen-spanning媒体查询特性

screen-spanning 不是标准 CSS 媒体特性，目前（2026 年 5 月）根本不存在 —— 你查到的 screen-spanning: single-fold-vertical 是误传或混淆了 Chromium 实验性前缀、旧草案名或拼写错误。

为什么 `screen-spanning` 查不到、用不了

Chrome/Edge 119+ 确实新增了折叠屏感知能力，但正式支持的是 horizontal-viewport-segments 和 vertical-viewport-segments，不是 screen-spanning。这个错误名称可能源于：

把 spanning（CSS 新增的媒体特征，用于检测元素是否跨铰链渲染）和 screen 错误拼接
将早期 Chromium 内部实验标记（如 screen-fold）误当作已发布特性
文档翻译或博客转述时的笔误，且未被及时纠正

直接在 CSS 中写 @media (screen-spanning: single-fold-vertical) 会被浏览器完全忽略，DevTools 里也看不到匹配状态。

真正可用的折叠态检测：用 `horizontal-viewport-segments` 和 `vertical-viewport-segments`

这两个才是当前唯一稳定、可部署的原生折叠检测方式，专为物理双视口设计：

horizontal-viewport-segments: 2 → 表示设备竖折（书本式），展开后被铰链水平分割成左右两个独立 viewport（如 Galaxy Z Fold）
vertical-viewport-segments: 2 → 表示设备横折（盖子式），展开后被铰链垂直分割成上下两个 viewport（如华为 Mate X3 展开态）
值为 1 表示单屏状态（折叠态或非折叠设备），2 才代表真实双列渲染
注意：document.body.clientWidth 在 horizontal-viewport-segments: 2 下返回的是单侧宽度（约 375–420px），不是总宽

示例写法：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

@media (horizontal-viewport-segments: 2) {
  .editor { grid-column: 2; }
  .sidebar { grid-column: 1; }
}

必须配合 `spanning` 特征识别跨铰链行为

仅靠 horizontal-viewport-segments 只能知道“屏幕分开了”，但不知道“我的导航栏有没有被强制铺满两块屏”。这时要用 spanning 媒体特征：

@media (spanning: none) → 元素完整落在单侧视口内（默认）
@media (spanning: single-fold-horizontal) → 元素横跨垂直铰链（即从左屏延伸到右屏）
关键影响：position: sticky 在 spanning: single-fold-horizontal 下会失效；transform 可能被截断；动画合成层压力陡增
别主动给导航加 spanning: single-fold-horizontal —— 浏览器只在布局无法避免跨屏时才触发它，强行指定反而引发卡顿