CSSメディアクエリの書き方〜同じ要素について、携帯からPCサイズまでは表示、PCサイズからPC大サイズまでは非表示、PC第より大きい画面では再び表示

Question

CSSを勉強中の初心者ですので、ありえないことをしようとしている質問でしたらすみません。

CSSでのメディアクエリの設定について、もし、タイトルのような方法がありましたら教えていただけると助かります。

携帯からPCサイズまでは表示、PCサイズからPC大サイズまでは非表示、PC大より大きい画面では再び表示
したいです。

具体的に書くと、
744px以上の画面幅でdispay:noneを指定し
そのあと、991pxまでは、非表示のまま
992px以上の画面幅では表示したいと思っています。

現在は、

@media (min-width: 769px) {

.fsbig-fpat {
display: none;
}
}

/991px以下のスクリーンサイズになると発動する設定/
@media(max-width: 991px) {

.fsbig-fpat {
display: none;
}

}
としていますが、これだと、
991px以下で非表示の設定が入っているため、すべての画面サイズで非表示になってしまっています。

メディアクエリでは、画面幅を範囲指定して表示、非表示をコントロールすることはできないのでしょうか？

もう一つ、992px以上で表示するためのクラスをつけて同じ要素を作成し、メディアクエリで指定する必要があるのでしょうか？

よろしくおねがいします。

Answer 1

「and」でつなげれば「～から～まで」と範囲指定できるので、如何でしょうか。

例：

@media screen and (min-width:768px) and ( max-width:1024px) {

MDN：メディアクエリの使用の「論理演算子」参照

Comments

[yuiran]

ありがとうございます！バッチリできました。今まで購入した書籍にも乗っていなかった方法だったので、新しい知識として吸収できとても助かりました！

[m.ts10806]

書籍を使ったことないので分かりませんが(全く解説ないとは思えないけど)、仕様的なところは提示したリファレンス確認するのが確実です。