媒体查询横屏与竖屏

媒体查询是一种用于在不同设备和屏幕尺寸上呈现不同样式的CSS技术。通过媒体查询，可以根据屏幕的宽度、高度、方向等条件来应用不同的样式。

要查询横屏和竖屏，可以使用orientation属性。orientation属性的值可以是portrait（竖屏）或landscape（横屏）。

以下是一个使用媒体查询查询横屏和竖屏的示例：

/* 在竖屏时应用的样式 */
@media (orientation: portrait) {
  body {
    background-color: red;
  }
}

/* 在横屏时应用的样式 */
@media (orientation: landscape) {
  body {
    background-color: blue;
  }
}

在上面的示例中，当设备处于竖屏模式时，body元素的背景颜色将为红色。当设备处于横屏模式时，body元素的背景颜色将为蓝色。

通过这种方式，您可以根据屏幕的方向来应用不同的样式，以提供更好的用户体验。