おしえて

css 全体設定について、PCとスマホの設定を変えたい

締切済

質問者：ハコ2222
質問日時：2021/01/13 06:20
回答数：2件

いつもありがとうございます。
表題の件で質問です。

全体のフォントサイズを、PC画面とスマホ画面で分けて設定したいのですができません。

---css----

body {
font-family: "MS Pゴシック", sans-serif;
font-size: 1.4rem;
}

@media only screen and (max-width:500px){

body {
font-size: 1.2rem;
line-height: 24px;
}
}

と記載したのですが、上の設定がスマホでも優先され、@media only screen and (max-width:500px)で記載したフォントサイズが適用されません。
アドバイスいただければ幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： naokita
回答日時：2021/01/13 18:49

CSSだけでは、PCの表示のようにされるだけなので、その500px以下として把握されません・・・

HTMLファイルの上部<head>内に、
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
を入れてみましょう。

- 1
- 件

通報する

この回答へのお礼

回答ありがとうございます。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
これはすでに入れています。それでもなりません、、

通報する

お礼日時：2021/01/14 21:47

No.2

回答者： wanderer1
回答日時：2021/01/20 18:12

記述の順序を逆にしてはいけないんでしょうか？

---css----

/* まず500pxまでのフォントについてを指定する */

body {
font-family: "MS Pゴシック", sans-serif;
font-size: 1.2rem;
line-height: 24px;
}

/* 次に幅が500px以上のフォントサイズを指定する */
/* max-ではなくmin-を使う*/

@media only screen and (min-width:500px){

body {
font-size: 1.4rem;
}

}