@media判断横竖屏

css @media 如何判断横竖屏

代码:

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

例如: 不同状态展示不同颜色

div{
    width: 100px;
    height: 100px;
}
@media screen and (orientation: portrait) {
    /*竖屏 css*/
    div{
        background-color: #ff0;
    }
  } 
  @media screen and (orientation: landscape) {
    /*横屏 css*/
    div{
        background-color: #f00;
    }
  }