如何利用CSS3针对折叠屏手机的两个屏幕区域进行独立布局？-css教程-PHP中文网

应使用@media (horizontal-viewport-segments: 2)检测书本式双屏（如galaxy z fold展开态），该查询精确匹配水平铰链分割为两个独立视口的状态，仅支持整数值2，兼容chrome 110+、edge 110+、safari 16.4+，需配降级样式且不可嵌套于其他媒体查询中。

如何利用css3针对折叠屏手机的两个屏幕区域进行独立布局？

直接用 @media (horizontal-viewport-segments: 2) 或 @media (vertical-viewport-segments: 2)，别碰 @media (prefers-holographic)——它在生产环境不可靠。

怎么用 horizontal-viewport-segments 检测书本式双屏

这是最常见折叠形态（如 Galaxy Z Fold 展开后左右两屏），浏览器通过硬件信号识别出水平方向被铰链切分为两个独立视口：

必须写成 @media (horizontal-viewport-segments: 2)，值只能是整数，不能写成 >1 或 =2
该查询只在 Chrome 110+、Edge 110+、Safari 16.4+ 生效；旧版本会直接忽略整个块，需配降级样式
不要嵌套在其他媒体查询里（比如 @media (min-width: 720px) and (horizontal-viewport-segments: 2)），部分浏览器会失效

典型用法是给左侧栏设固定宽度、右侧主内容自适应：

@media (horizontal-viewport-segments: 2) {
  .sidebar { width: 320px; }
  .main { flex: 1; margin-left: 16px; }
}

vertical-viewport-segments 适用于翻盖式设备

华为 Mate X 系列或某些 Flip 形态设备展开后，铰链是水平的，屏幕被上下分割——这时要用 vertical-viewport-segments：

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

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

下载

触发条件是 @media (vertical-viewport-segments: 2)，同样只认精确整数值
注意：它和 orientation: landscape 无关，有些设备翻盖后仍是竖屏布局，仅靠 orientation 会漏判
常见错误是把它和 screen-spanning: single-fold-vertical 混用——后者是 Chromium 实验性特性，已废弃，别写

适合做顶部工具栏 + 底部操作区的分离布局，例如：

@media (vertical-viewport-segments: 2) {
  header { height: 50vh; }
  main { height: 50vh; overflow-y: auto; }
}

为什么不能用 container queries 替代 viewport segments

@container 响应的是容器尺寸变化，而折叠事件改变的是整个 viewport，两者作用域完全不同：

@container (width > 600px) 永远捕获不到铰链动作——它只在 JS 修改容器宽高或 CSS 强制重排时触发
必须给父元素加 container-type: inline-size 才生效，但 body 和 html 默认不是 layout-containment 边界，加了也白加
即使你手动 wrap 一层 <div class="fold-root"> 并设 <code>container-type，它也无法感知系统级折叠信号，只是被动响应尺寸变化
真要组件级微调（比如某个卡片在双屏下自动变两列），可以配合使用，但主干布局必须靠 viewport-segments

真正容易被忽略的是：这些媒体查询不支持 JavaScript 动态读取值，window.matchMedia 返回的 matches 在折叠动画过程中可能短暂为 false，所以关键交互逻辑（比如侧边栏开关）仍需结合 visualViewport?.width 做兜底判断。