如何根据移动端横竖屏状态显示页面

css和js均可以用于判断移动端横竖屏状态

css

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

根据横竖屏设置大小时，正常页面尺寸常规书写即可，横屏样式单独设置。即只需在原有样式基础上添加横屏样式即可，

当用户横屏时加载横屏样式，竖屏时取消横屏样式即加载默认样式。

js判断横屏还是竖屏

通过监听 onorientationchange 事件

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
      if (window.orientation === 180 || window.orientation === 0) { 
          console.log("竖屏");
          $(".codeIg_s").removeClass('vercreen');//取消横屏样式
      } 
      if (window.orientation === 90 || window.orientation === -90 ){ 
          console.log("横屏");
          $(".codeIg_s").addClass('vercreen');//添加横屏样式
      }  
}, false); 

如果没有页面旋转事件触发，只是修改页面大小比例，则不会触发此事件