横屏竖屏不同css

基础概念

横屏（Landscape）和竖屏（Portrait）是指设备的显示方向。横屏时，设备的宽度大于高度；竖屏时，设备的高度大于宽度。在网页设计和移动应用开发中，需要考虑不同屏幕方向下的布局和样式。

类型

媒体查询：使用CSS媒体查询可以根据屏幕方向应用不同的样式。
JavaScript检测：通过JavaScript检测设备的屏幕方向，并动态调整样式。
框架支持：一些前端框架（如React Native、Flutter）提供了对横屏竖屏的支持。

应用场景

移动应用：在移动应用中，横屏和竖屏通常用于不同的功能，例如横屏用于视频播放，竖屏用于文本阅读。
网页设计：在网页设计中，横屏和竖屏可以用于优化不同设备的显示效果。
游戏开发：在游戏中，横屏和竖屏可以用于不同的游戏体验，例如横屏用于赛车游戏，竖屏用于解谜游戏。

示例代码

以下是一个使用CSS媒体查询实现横屏竖屏不同样式的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横屏竖屏不同CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            padding: 20px;
        }

        /* 竖屏样式 */
        @media (orientation: portrait) {
            .container {
                background-color: lightblue;
            }
        }

        /* 横屏样式 */
        @media (orientation: landscape) {
            .container {
                background-color: lightgreen;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>横屏竖屏不同CSS示例</h1>
        <p>旋转设备以查看不同的背景颜色。</p>
    </div>
</body>
</html>