"```markdown

移动端如何使页面横、竖屏

在移动端开发中，处理页面的横屏（Landscape）和竖屏（Portrait）布局是一个重要的任务。不同的屏幕方向可能需要不同的样式来提供良好的用户体验。以下是一些实现页面横竖屏适配的方法。

1. 使用CSS媒体查询

CSS媒体查询可以根据设备的屏幕方向调整样式。以下是一个基本的示例：

/* 竖屏样式 */
@media only screen and (orientation: portrait) {
    body {
        background-color: lightblue;
    }
}

/* 横屏样式 */
@media only screen and (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

在这个示例中，竖屏时背景色为浅蓝色，横屏时为浅绿色。

2. 监听屏幕方向变化

在JavaScript中，可以使用window.orientation和resize事件来检测屏幕方向变化：

function handleOrientationChange() {
    if (window.orientation === 0 || window.orientation === 180) {
        // 竖屏逻辑
        console.log(\"当前为竖屏\");
    } else {
        // 横屏逻辑
        console.log(\"当前为横屏\");
    }
}

// 监听resize事件
window.addEventListener(\"resize\", handleOrientationChange);

3. 使用视口元标签

在HTML中，使用视口元标签可以帮助设置页面的缩放和布局，确保在不同方向下都能正常显示：

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

4. CSS Flexbox布局

利用Flexbox布局，可以更灵活地适应不同的屏幕方向。例如：

.container {
    display: flex;
    flex-direction: column; /* 竖屏 */
}

@media only screen and (orientation: landscape) {
    .container {
        flex-direction: row; /* 横屏 */
    }
}

5. 高级适配技术

使用CSS Grid布局可以实现更复杂的布局适配：

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* 竖屏 */
}

@media only screen and (orientation: landscape) {
    .grid-container {
        grid-template-columns: 1fr 1fr; /* 横屏 */
    }
}

6. 提示用户旋转设备

在某些情况下，可以提示用户旋转设备以获得更好的体验：

<div id=\"orientation-warning\" style=\"display: none;\">
    请将设备旋转到横屏模式以获得更好的体验。
</div>

<script>
function checkOrientation() {
    if (window.orientation === 90 || window.orientation === -90) {
        document.getElementById('orientation-warning').style.display = 'none';
    } else {
        document.getElementById('orientation-warning').style.display = 'block';
    }
}

window.addEventListener(\"orientationchange\", checkOrientation);
checkOrientation();
</script>

通过以上方法，可以有效地在移动端实现页面的横竖屏适配，提升用户体验。