监听屏幕旋转+js

// 监听屏幕方向变化
window.addEventListener('orientationchange', function() {
    console.log('屏幕方向发生变化');
    // 这里可以执行一些操作，比如重新布局页面元素
});

// 或者监听窗口大小变化
window.addEventListener('resize', function() {
    console.log('窗口大小发生变化');
    // 检查屏幕方向
    if (window.innerHeight > window.innerWidth) {
        console.log('当前为竖屏');
    } else {
        console.log('当前为横屏');
    }
    // 执行相应的操作
});

/* 竖屏样式 */
@media screen and (orientation: portrait) {
    /* 竖屏时的样式 */
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
    /* 横屏时的样式 */
}

if ('onorientationchange' in window) {
    // 浏览器支持 orientationchange 事件
} else {
    // 使用 resize 事件作为替代
}