cssでメディアクエリを記載する順番について

Question

ｃｓｓでメディアクエリを適用するとき、こちらの項目ですとどの順番で記載したら正しくコードが機能しますか？
色々調べて入れ換えてみたのですがうまくいきませんでした。それぞれのメディアクエリで個別に設定をおこないたいです。

①/* 1301px以上の設定*/
@media (min-width: 1301px){}

②/* 1300px以下の設定*/
@media (max-width: 1300px)

③/* 769px以上の設定*/
@media (min-width:769px)

④/* 1024px以下の設定*/
@media (max-width: 1024px)

⑤/* 768px以下の設定*/
@media (max-width : 768px )

よろしくお願いいたします。

Comments

[maisumakun]

たとえば、1000px幅となった場合にはどれを適用したいのでしょうか（そのままだと2、4が適用されます）。

[kyoya0819]

2, 3, 4では？

Answer 1

中身によりますが、どうしても動作しないなら、「かつ」で端末幅を制限すればよいのでは？

それ以外はコードがないと何とも

Answer 2

要件にもよりますが、
全部pxにしてると、デバイス幅の種類だけ定義しなくてはならなくなるため、
メディアクエリは、PCとスマホで切り分けるだけにして、
スマホ以下の場合は、ビューポート系単位（vw、vh、vmax、vmin）を使うとした方が楽です。

例えば下記です。

/* PCが標準とする */
.container {
  width: 800px;
}

/* スマホデバイス時にスタイルをスマホ表示とする場合 */
@media screen and (max-width: 960px) { 
  /* 少し大きめに、960px（最近のスマホは画角でかい） */
  .container {
    width: 80vw; /* 画面横幅の80%となる */
  }
}

とかです。
ビューポート系単位は、ブラウザの表示範囲の何%かの実サイズを指定できる単位なので、
（単位%は、親の大きさに対しての比率になるため、親の影響を必ず考えねばならないので、あまり有効でない時が多い）
レスポンシブを実現する上ではかかせない単位です。

Answer 3

CSSは後ろに記述したもので前の記述を上書きしますので、それを考慮した書き方にします。

メディアクエリを記述する順番としてはPCファーストとモバイルファーストの２つの方法があります。

PCサイトを重視するならPCファースト、モバイルサイトを重視するならモバイルファーストにするといいでしょう。

実際の書き方は下記をご参考に。

メディアクエリの書き方

質問のコードだと、max-width と min-width の指定が混在してますので、後のCSSが前のCSSを上書きしてしまいます。

PCファーストなら、先のPC用のCSSを記述して、max-width でそれより小さい場合のCSSを後に順に記述していくことになります。

/* PC用の設定(1301px以上) */

@media (max-width: 1300px) {
/* 1300px以下の設定*/
}

@media (max-width: 1024px) {
/* 1024px以下の設定*/
}

@media (max-width : 768px ) {
/* 768px以下の設定*/
}