☰

CSS で縦向きと横向きのメディアクエリを設定するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css media-queries
CSS で縦向きと横向きのメディアクエリを設定するにはどうすればいいですか? 質問する

私のメディアクエリは次のとおりです:

@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;
  }

.visible-tabletタブレットを自動回転モード（縦向きと横向き）に切り替えるたびに、この div が常に表示されるようにしたいです。

しかし、ポートレートとランドスケープの条件を使用しましたが、それでもこの問題に直面しています。何かコメントはありますか?

ベストアンサー1

これはとても簡単なことかもしれません。

@media (orientation: landscape) {

}

おすすめ記事