メディアクエリが適用できない

前提・実現したいこと

640px以上の画面(スマホ対応の為)に対してのCSS設定を行いたいと考えています

発生している問題・エラーメッセージ

現在ですが、640px以上の画面に対してメディアクエリを設定したのですが、googleのデベロッパーツールで「Responsive」を設定し「375」×「418」を設定しました。

しかし、デベロッパーツールで確認する限り、スタイルが反映されていませんでした。
具体的には、メディアクエリの設定が反映されずクラス.testには2remが設定されてしまいまいました。

該当のソースコード

css
1.test{
2font-size:2rem;
3
4}
5
6@media (min-width: 640px) {
7  .test{
8font-size:1rem;
9
10}
11
12
13}
14@media (min-width: 768px) {
15
16}
17@media (min-width: 1024px) {
18
19}
20@media (min-width: 1280px) {
21
22}
23@media (min-width: 1536px) {
24
25}

こちら、原因の究明の為、どなたかご助言頂けましたら幸いです

Lhankor_Mhy

2020/12/25 09:45 編集

「スタイルがが反映されていませんでした」とのことですが、具体的にはどのようなスタイルになっていたのですか？ 2remですか？ 1remですか？それとも全く別の値ですか？そして、どのような値であるべきだと考えているのですか？

退会済みユーザー

2020/12/25 10:20 編集

これだと、もしも幅が1536pxだと全部もメディアクエリーが適用されそうですが、そういうことでなく？幅375pxだとどのメディアクエリーも適用されない。font-size:2rem;だけ反映されそう。

jjj001

2020/12/25 11:45

>具体的にはどのようなスタイルになっていたのですか？こちらですが、1remであるとの想定であったのですが「2rem」のままになってしまっていた点が疑問でした。

jjj001

2020/12/25 11:52

>これだと、もしも幅が1536pxだと全部もメディアクエリーが適用されそうですが、そういうことでなく？最終的には、スマホ用には「@media (min-width: 640px) {」の設定、タブレットなどは「@media (min-width: 768px) 」PCは「@media (min-width: 1024px)」もしくはそれ以上(1280px, 1536px)の設定を行いたいと考えています。

Lhankor_Mhy

2020/12/25 11:56

min-width は最小値ですから、それ以上のスクリーンサイズという意味ですよ。そして、CSSは後書き優先が原則なので、あてはまるメディアクエリが複数あると、後に書いた方が有効になりますよ。

jjj001

2020/12/25 12:08 編集

min-widthはそのように理解しているのですが、「Responsive」に「375」に設定し「dpi」が「２」であった場合は、結果的に「750」になる為、「@media (min-width: 640px)」こちらは適用されるのではないのかと思っていたのですが、そういった訳ではありませんでしょうか？

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

回答1件

ベストアンサー

現状のCSSだと、下記のような意味になります。

css
1.test{
2/* すべて画面サイズに共通の設定 */
3/* 640px未満のみの設定(後で上書きされ場合) */
4
5font-size:2rem;
6
7}
8
9@media (min-width: 640px) {
10  .test{
11/* 640px以上に共通の設定 */
12/* 640px以上768未満のみの設定(後で上書きされ場合) */
13
14font-size:1rem;
15
16}
17
18}
19@media (min-width: 768px) {
20/* 768px以上に共通の設定 */
21/* 768px以上1024未満のみの設定(後ろで上書きされ場合) */
22
23}
24@media (min-width: 1024px) {
25/* 1024px以上に共通の設定 */
26/* 1024px以上1280未満のみの設定(後ろで上書きされ場合) */
27
28}
29@media (min-width: 1280px) {
30/* 1280px以上に共通の設定 */
31/* 1280px以上1536px未満のみの設定(後ろで上書きされ場合) */
32
33}
34@media (min-width: 1536px) {
35/* 1536px以上の設定 */
36}

現在ですが、640px以上の画面に対してメディアクエリを設定したのですが、googleのデベロッパーツールで「Responsive」を設定し「375」×「418」を設定しました。

ということなら、画面幅は640px未満ですので、一番最初に記述したfont-size:2rem;が適用されます。

具体的には、メディアクエリの設定が反映されずクラス.testには2remが設定されてしまいまいました。

設定どおりに反映されてます。

追記

レスポンシブ対応のメディアクエリの記述法は大きく分けてモバイルファーストとPCファーストの2種類あります。
最近は、モバイルファーストが主流のようです。

下記は、それぞれの場合のCSSの記述例です。

モバイルファーストのメディアクエリの記述法(min-widthを使用)

css
1/* 全てに共通の設定 */
2/* スマホ用の設定 */
3@media (min-width: 640px) {
4/* タブレット用の設定 */
5}
6@media (min-width: 1024px) {
7/* PC用の設定 */
8}

PCファーストのメディアクエリの記述法(maxn-widthを使用)

css
1/* 全てに共通の設定 */
2/* PC用の設定 */
3@media (max-width: 1024px) {
4/* モバイル用の設定 */
5}
6@media (max-width: 640px) {
7/* スマホ用の設定 */
8}

投稿2020/12/25 23:51

編集2020/12/26 08:14

hatena19

総合スコア34075

jjj001

2020/12/26 03:57 編集

ご回答ありがとうございます。自分、勘違いしているかもしれないのですが、デベロッパーツールで「Responsive」を設定し「375」×「418」としていますが、dpiを「2」にしている為、「375」×2 = 750pxとして計算されるということではないのでしょうか？

hatena19

2020/12/26 04:59

逆ですね。実機の解像度が横750pxなのをCSSでは375pxと解釈するということです。

jjj001

2020/12/26 05:10 編集

ご返信ありがとうございます。 >逆ですね。実機の解像度が横750pxなのをCSSでは375pxと解釈するということです。こちら、実機で「750px」だと想定するとなると、メディアクエリの「@media (min-width: 640px)」こちらもデベロッパーツールで「375」と指定していた場合、反映されるのではないでしょうか...?

hatena19

2020/12/26 05:18

(min-width: 640px) は最小値640pxという意味ですので、計算上の画面幅640px以上（実機の画面幅ではない）の時適用されます。デベロッパーツールで「375」と指定した場合はDPRに関係なく適用されません。

jjj001

2020/12/26 05:51 編集

> デベロッパーツールで「375」と指定した場合はDPRに関係なく適用されません。こちら、そうなりますと、デベロッパーツールにてレスポンシブの表示を確認したい場合、「375」ではなく「750」と設定をしなければならないという理解であっておりますでしょうか...?

jjj001

2020/12/26 05:56 編集

しかし、どうしても疑問なのが、デベロッパーツールで「iphone6/7/8」を指定すると自動でサイズは「375」×「667」になる点なのですよね... これでは実際の解像度である「750」の表示を確認しつつ、メディアクエリを設定し検証しながら開発していくことは出来ないのではないかと思っております...

hatena19

2020/12/26 06:03

いえ、デベロッパーツールは「375」のままでOKです。画面幅の計算値が640px以下の時(375のときも)、 font-size:1rem; それ以上の時、 font-size:2rem; にしたいのなら、 CSSは下記になります。 .test{ font-size:1rem; } @media (min-width: 640px) { .test{ font-size:2rem; }

jjj001

2020/12/26 06:31

ありがとうございます。何と申しますか、今回のケースですと、最終的には、「@media (min-width: 640px)」こちらにスマホ用の設定を適用しつつデベロッパーツールで確認しつつスタイルを当てられたらと思っていました。自分も少々どのようにすればうまくデバイスごとに設定を変えつつスタイルを記述していけば良いか正直分からない状態です...

hatena19

2020/12/26 08:50 編集

> 最終的には、「@media (min-width: 640px)」こちらにスマホ用の設定を適用しつつこの認識が間違ってます。 @media (min-width: 640px){} には画面幅640px以上の場合の設定を記述します。スマホ用の設定はこのメディアクエリの前に記述します。回答に、記述例を追記しましたので参考にしてください。

jjj001

2020/12/26 08:59

わざわざご親切にありがとうございます。参考にさせていただきます。

jjj001

2020/12/26 09:15 編集

色々調べていたら、少々混乱してしまい、度々申し訳ないのですが、iphoneの「Retina」ディスプレイでは解像度が倍になる = 「375」× 2 = 「750px」までをスマホ用としてメディアクエリに設定するというのは、認識が違ってしまっているということでしょうか...?

jjj001

2020/12/26 09:23 編集

Retinaディスプレイの部分は少々疑問ではあるのですが、そこで引っかかっていても仕方ないですし、取り敢えずは追記頂いた形で、スマホ優先のスタイルを当てていきたいと思います。

hatena19

2020/12/26 10:06

画面幅750px DPR2.0 のiPhoneでも、画面幅1125px DPR3.0のiPhoneXでも、CSSからみたらどちらも画面幅375pxと認識されるということです。つまりCSSを記述するときは、実機の解像度を意識する必要はないということです。