html - 如何在css中设置纵向和横向媒体查询？

Question

这是我的媒体查询:

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
} 

但是在平板电脑中，如果是横屏模式，这个div会显示

 .visible-tablet {
    display: inherit !important;
  }

如果它处于纵向模式，则显示此 div

.visible-phone {
    display: inherit !important;
  }

我希望这个 div .visible-tablet 在我将平板电脑切换到自动旋转模式(适用于纵向和横向)时始终显示

但是我使用了纵向和横向条件，但我仍然面临这个问题。有什么意见吗？

Answer 1

可以这么简单。

@media (orientation: landscape) {

}