如何为横向和纵向创建单独的UI？

为了为横向和纵向创建单独的UI，可以采用以下方法：

使用CSS媒体查询：通过CSS媒体查询，可以根据设备的宽度或高度来应用不同的样式。例如，可以使用@media规则来定义不同的样式，以适应不同的屏幕方向。具体实现方式如下：

/* 横向布局 */
@media screen and (orientation: landscape) {
  /* 在横向布局下的样式 */
}

/* 纵向布局 */
@media screen and (orientation: portrait) {
  /* 在纵向布局下的样式 */
}

使用响应式框架：响应式框架可以根据设备的屏幕大小和方向自动调整布局和样式。常见的响应式框架包括Bootstrap、Foundation等。这些框架提供了一套响应式的网格系统和组件，可以方便地创建适应不同屏幕方向的UI。
使用JavaScript动态调整UI：通过JavaScript可以根据设备的方向来动态调整UI。可以使用window.orientation属性来获取设备的方向，然后根据方向来修改相应的样式或布局。

window.addEventListener("orientationchange", function() {
  if (window.orientation === 90 || window.orientation === -90) {
    // 横向布局
  } else {
    // 纵向布局
  }
});

以上是为横向和纵向创建单独的UI的几种常见方法。具体选择哪种方法取决于项目需求和开发者的偏好。