很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式：

1 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('横屏');
  }  
}); 

2 CSS检测横屏

@media screen and (orientation: portrait) {
 /*竖屏...*/
} 
@media screen and (orientation: landscape) {
 /*横屏...*/
}

3 现在大部分的手机是支持:orientationchange事件，如果不支持用：resize

//判断手机横竖屏状态
window.addEventListener(
 "onorientationchange" in window ? "orientationchange" : "resize",
 function () {
  if (window.orientation === 180 || window.orientation === 0) {
   // window.location.reload();
  }
  if (window.orientation === 90 || window.orientation === -90) {
   // window.location.reload();
  }
 },
 false
);