CSS 设备方向

CSS 设备方向是用来定义网页布局在不同设备上的方向。具有以下两个属性：

1. orientation：定义当前设备的方向，横向还是纵向。
2. aspect-ratio：定义视口宽高比，这个属性主要用于限制页面在不同宽高比的设备上的布局。

orientation 属性

orientation 是一个只读的属性，它的取值可以是：

• landscape 表示横向布局
• portrait 表示纵向布局

当我们在不同的设备上打开该网页时，浏览器会根据当前设备的方向来渲染页面。

/* 定义横向方向布局 */
@media (orientation: landscape) {
  /* 横向布局样式 */
}

/* 定义纵向方向布局 */
@media (orientation: portrait) {
  /* 纵向布局样式 */
}

这段代码会根据设备的方向来判断应该渲染什么样式。

aspect-ratio 属性

aspect-ratio 属性用于定义视口宽高比。

/* 定义视口宽高比为 16:9 */
@media (aspect-ratio: 16/9) {
  /* 样式 */
}

这段代码会限制页面在宽高比为 16:9 的设备上显示相应的布局样式。

通常情况下，我们会将 aspect-ratio 结合其他媒体查询一起使用，以实现更加精准的布局控制。

例如，我们要在横向设备上显示一个卡片布局，在纵向设备上显示一个列表布局，同时在宽高比为 16:9 的设备上缩小一倍字体大小。

@media (orientation: landscape) {
  /* 卡片布局样式 */
}

@media (orientation: portrait) {
  /* 列表布局样式 */
}

@media (aspect-ratio: 16/9) {
  body {
    font-size: 0.5em;
  }
}

以上代码实现了在不同设备上的不同布局和宽高比的限制。