在媒体查询语句中，使用媒体条件（）来创 建适应不同设备的方向（横屏landscape、竖屏 portrait等）的布局。 device-width device-height orientation screen

在媒体查询语句中，使用`orientation`媒体条件来创建适应不同设备方向的布局。`orientation`媒体条件可以检测设备的方向，判断设备是竖屏还是横屏，从而应用不同的样式规则。

`orientation`媒体条件有两个取值：`portrait`和`landscape`。其中，`portrait`表示设备处于竖屏方向，`landscape`表示设备处于横屏方向。在媒体查询语句中，可以使用`orientation`条件来判断设备的方向，例如：

/* 当设备处于竖屏方向时应用的样式 */
@media (orientation: portrait) {
  /* ... */
}

/* 当设备处于横屏方向时应用的样式 */
@media (orientation: landscape) {
  /* ... */
}

在上面的代码中，使用`@media`语句和`orientation`条件来判断设备的方向，从而应用不同的样式规则。通过这种方式，可以实现响应式布局，让页面能够适应不同设备的方向和显示条件。

相关问题

android studio横竖屏

### Android Studio 中处理横竖屏切换

#### 方法一：通过配置清单文件固定屏幕方向

为了防止 Activity 在横竖屏切换时被销毁并重新创建，可以在 `AndroidManifest.xml` 文件中指定特定的 Activity 的屏幕方向。这可以通过设置 `android:screenOrientation` 属性来实现。

<activity android:name=".YourActivity"
          android:configChanges="orientation|screenSize"
          android:screenOrientation="portrait">
</activity>

上述代码片段展示了如何将某个 Activity 锁定为纵向模式[^1]。

#### 方法二：动态调整布局适应不同屏幕方向

如果希望应用程序能够响应屏幕旋转而不会丢失数据，则可以采用另一种策略——让应用自己管理状态保存逻辑，在 `onSaveInstanceState()` 方法内存储必要的信息，并在 `onCreate(Bundle)` 或者 `onRestoreInstanceState(Bundle)` 中恢复这些信息。

对于不想重启 activity 来应对屏幕变化的情况，还可以覆盖 `onConfigurationChanged(Configuration newConfig)` 函数来进行自定义行为：

@Override
public void onConfigurationChanged(@NonNull Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    
    if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE){
        setContentView(R.layout.activity_main_landscape);  
    } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
        setContentView(R.layout.activity_main_portrait);
    }
}

这段 Java 代码允许开发者根据新的配置更改事件改变界面显示的内容而不必重建整个 Activity 实例[^3]。

另外一种方式是在 XML 布局资源里分别为横向和纵向提供不同的设计版本，放置于相应的目录下（如 res/layout 和 res/layout-land），当设备发生转向操作时系统会自动加载匹配的方向对应的 UI 资源文件[^2]。

#### 方法三：编程设定屏幕方向

除了静态声明外，也可以利用 API 动态控制当前页面的方向属性。比如下面的例子就是在运行期间强制使某 Activity 处于某一特定方向上：

requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE;
// 或者
requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_SENSOR_PORTRAIT;

以上 Kotlin 语句可用于即时修改正在执行中的组件所处的状态[^4]。

uniapp 项目设置横竖屏\

### 配置 UniApp 应用支持横屏和竖屏切换

#### 修改 `manifest.json` 文件
为了使整个应用程序能够适应不同的屏幕方向，在项目的根目录下找到并编辑 `manifest.json` 文件。在 `"app-plus"` 字段内添加或修改 `"screenOrientation"` 属性来声明应用所支持的方向：

{
  "app-plus": {
    "screenOrientation": [
      "portrait-primary",
      "landscape-primary"
    ]
  }
}

这表示该应用既可以在正常位置上显示为竖直模式，也可以旋转到水平状态以呈现横向视图[^3]。

#### 使用 API 控制特定页面的屏幕方向
对于某些特殊需求场景下的单个页面来说，可以通过调用 Plus SDK 提供的方法动态调整其屏幕朝向而不影响全局设置。例如，在页面生命周期函数 `onLoad()` 中加入如下代码片段即可实现当此页被访问时锁定指定的方向；离开之后则恢复默认行为：

export default {
  onLoad() {
    // 页面加载允许横竖屏展示
    plus.screen.lockOrientation('default');
    
    // 如果希望强制当前页面保持某一固定方向，则替换上面那行代码为下面对应的语句之一：
    // plus.screen.lockOrientation('portrait-primary'); // 锁定为正向竖屏
    // plus.screen.lockOrientation('landscape-primary'); // 锁定向左横屏
  },
  
  onUnload() {
    // 当页面卸载的时候解锁屏幕方向控制，以便其他页面可以根据自身情况决定是否要改变方向
    plus.screen.unlockOrientation();
  }
}

上述 JavaScript 方法适用于 HBuilderX 编译环境中的原生插件开发方式[^2][^4]。

通过以上两种方法相结合的方式，可以灵活地管理不同平台上的屏幕方向特性，并解决可能出现的样式错乱等问题[^1]。