device-posture

语法

device-posture 特性被指定为以下列表中的一个关键字值。

continuous

表示屏幕处于平坦状态。可折叠设备在平坦时（完全打开或完全关闭）为 continuous。不可折叠设备被认为是平坦的，因此始终为 continuous——这包括无缝曲面显示器和标准桌面、笔记本电脑、平板电脑和手机屏幕。

folded

表示屏幕处于折叠状态。可折叠设备在以书本或笔记本电脑姿态使用时为 folded。

示例

在此示例中，device-posture 媒体特性检测设备何时处于折叠姿态，并根据其orientation 添加边距，以在应用程序的两个面板之间创建更大的间隙，以便于阅读。

@media (device-posture: folded) and (orientation: landscape) {
  .list-view {
    margin-inline-end: 60px;
  }
}

@media (device-posture: folded) and (orientation: portrait) {
  .list-view {
    margin-block-end: 60px;
  }
}

要查看上述代码的实际效果，请尽可能在可折叠设备上查看设备姿态 API 演示。当前的浏览器开发工具可以模拟可折叠设备，但不支持模拟部分折叠的设备——只能模拟完全打开或关闭的设备——因此它们将始终返回 continuous。

规范

浏览器兼容性

另见

• DevicePosture
• 设备姿态 API
• 使用媒体查询
• @media