[TOC] # 横屏适配  很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式： <br> # JavaScript检测横屏 `window.orientation`:获取屏幕旋转方向 ~~~ window.addEventListener("resize", ()=>{ if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 console.log('竖屏'); }; if (window.orientation === 90 || window.orientation === -90 ){ // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度 console.log('横屏'); } }); 复制代码 ~~~ <br> # CSS检测横屏 ~~~ @media screen and (orientation: portrait) { /*竖屏...*/ } @media screen and (orientation: landscape) { /*横屏...*/ } ~~~ <br> <br> # 参考资料 [关于移动端适配，你必须要知道的](https://juejin.im/post/5cddf289f265da038f77696c)