Media Queries 備忘録

横幅380px以下

@media screen and (max-width: 380px) {
  #test {
    display: none;
  }
}

横幅380px以上、かつ高さ750px以下

andでつなぐことで、AND条件設定

@media screen and (min-width: 380px) and (max-height: 750px) {
  #test {
    display: none;
  }
}

印刷画面、または横幅300px以上

カンマでつなぐことで、OR条件設定

@media print, screen and (min-width: 300px) {
  #test {
    display: none;
  }
}

横画面、かつ横幅750px以上850px以下、かつ高さ350px以上380px以下

横画面の場合、横にした状態が基準で横幅と高さが認識される

@media screen and (orientation: landscape) and (min-width: 750px) and (max-width: 850px) and (min-height: 350px) and (max-height: 380px) {
  #test {
    display: none;
  }
}