３種類以上のレスポンシブに対応する時の記述がわかりません

やりたいこと
ブレイクポイントがそれぞれ600px, 900px, 1200pxの時
①600px以下でsumple_smを表示
②1200px以上でsumple_lgを表示
③600px以上、1200px以下でsumple_mdをそれぞれ表示させる

やってみたこと

sass
1@media(max-width: 600px) {
2            .sumple_md {
3                display: none;
4            }
5            .sumple_lg {
6                display: none;
7            }
8        }
9
10        @media(min-width: 1200px) {
11            .sumple_sm {
12                display: none;
13            }
14            .sumple_md {
15                display: none;
16            }
17        }
18思いつきでこちら試してましたがsumple_mdが全てのサイズで
19display: none;が適用され③が表示されませんでした。
20◯◯px > sumple_md < ◯◯pxでdisplay: none;を適用させる方法を教えていただきたいです。
21
22```html
23

   <div class="offset-3 col-2" style="height: 200px; background-color: #aaa;">
     box2
   </div>
  </div>
</div>


```html
<div class="container sumple_md">
      <div class="row d-flex">
       <div class="offset-3 col-2" style="height: 100px; background-color: #ccc;">
         box1
       </div>
      
       <div class="offset-3 col-2" style="height: 100px; background-color: #aaa;">
         box2
       </div>
      </div>
    </div>

html
1<div class="container sumple_sm">
2      <div class="row d-flex">
3       <div class="offset-3 col-2" style="height: 50px; background-color: #ccc;">
4         box1
5       </div>
6      
7       <div class="offset-3 col-2" style="height: 50px; background-color: #aaa;">
8         box2
9       </div>
10      </div>
11    </div>

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

提示されたコードだと、「sumple_mdが全てのサイズでdisplay: none;が適用され③が表示されない」ということではなく、画面サイズが600px < 1200pxの範囲で全ての要素が表示されると思われます。

以下のコードを追加すれば解決するはずです。

css
1@media (min-width: 601px) and (max-width: 1199px) {
2  .sumple_sm, .sumple_lg {
3    display: none;
4  }
5}

投稿2020/11/10 10:43

cerfweb

総合スコア1907

cheetoi

2020/11/11 12:03

cerfwebさんの通り、こちらの記述で中間サイズを表示させることができまして非常に助かりました。ありがとうございます、また機会がありましたらお願いします！

行動規範の内容に同意します

モバイルファーストで書くならこんな感じです。

css
1　 .sumple_sm {
2       display: block;
3    }
4　 .sumple_md {
5       display: none;
6    }
7　　.sumple_lg {
8       display: none;
9    }
10
11@media(min-width: 600px) {
12　 .sumple_sm {
13       display: none;
14    }
15　 .sumple_md {
16       display: block;
17    }
18}
19
20@media(min-width: 1200px) {
21　 .sumple_md {
22       display: none;
23    }
24　　.sumple_lg {
25       display: block;
26    }
27}