【CSS】レスポンシブ PCで表示 スマホで非表示のまとめ

使い方

（例）class名にis_pcを入れるとPCのときだけ表示されます。

is_pc ・・・PCで表示したいところに使う
is_sp・・・スマホで表示したいところに使う
is_ipadPro_pc・・・ipadPro・pcで表示したいところに使う
is_ipad_ipadPro_pc・・・ipad・iPadPro・pcで表示したいところに使う
is_sp_ipad・・・スマホ・ipadで表示したいところに使う
is_sp_ipad_ipadPro・・・スマホ・ipad・ipadProで表示したいところに使う



/* ipad・スマホ・iPadPro以外（PC = 1025px以上の幅(1025px含む) ）*/
@media (min-width: 1025px) {
  .is_sp_ipad_ipadPro {
    display: none;
  }
}


/* ipad・スマホ以外（ipadPro・PC　= 811px以上の幅(811px含む) ）*/
@media (min-width: 811px) {
  .is_sp_ipad {
    display:none;
  }
}


/* スマホ以外（ipad・iPadPro・PC = 541px以上の幅(541px含む) ）*/
@media (min-width: 541px) {
  .is_sp {
    display:none;
  }
}


/*  ipad pro 1024px以下の幅(1024px含む)  */
@media (max-width: 1024px) {
  .is_pc {
    display:none;
  }
}


/*  ipad 810px以下の幅(810px含む) */
@media (max-width: 810px) {
  .is_ipadPro_pc {
    display:none;
  }
}


/*  Smartphone 540px以下の幅(540px含む) */
@media (max-width: 540px) {
  .is_ipad_ipadPro_pc {
    display:none
  }
}

あとがき

web用のデザインじゃない時、複雑なデザインの時のレスポンシブには悩まされますが、こちらのまとめを使うことで少しでもレスポンシブが楽になればと思い共有させていただきました。
自己流でまとめたものなので、もっとこうすればいいよ。などあればお気軽にコメントください。