[amakazusan]

お世話になっています。

スマホとPCでタイトル文字の大きさを変更させたいと思っています。

CSSをいれたのですが、上手くいきません。

.c-entry__title {
font-size: 32px;
}

@media screen and (max-width: 480px)
.c-entry__title {
font-size: 20px !important;
}

記述に間違いがあるのでしょうか？

恐れ入りますが、ご教授いただけると幸いです。

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

Snow Monkey のデフォルトは、

h1 {
  font-size: 1.66667rem; /* 26.66667px 相当 */
}

@media (min-width: 64em) {
  h1 {
    font-size: 2.5rem; /* 40px 相当 */
  }
}

となっています。これは、基本は 1.66667rem、画面の横幅が 64em 以上（PC サイズ）のときは 2.5rem になる、ということです。

.c-entry__title {
  font-size: 32px;
}

とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか？

ちなみに、

@media screen and (max-width: 480px) {
  .c-entry__title {
    font-size: 20px !important;
  }
}

は、画面幅が480px以下の場合は絶対的に 20px という意味になります。

♥ 0

いいねをした人: 居ません

[amakazusan]

ご返信ありがとうござます。

やりたかった内容としては、

デファクトのタイトルの大きさではスマホにすると大きかったので小さくしたいというものでした。

とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか？

コチラについては

@media screen and (max-width: 480px)
  .c-entry__title {
    font-size: 20px !important;
  }

を動作させたかったのですが、CSSがうまくどうさせずになやんでいました。

そこで、書かれていた

@media screen and (max-width: 480px) {
  .c-entry__title {
    font-size: 20px !important;
  }
}

の記述に変更したところ動作いたしました。

@media~{

}

が原因だったんでしょうか。

解決致しました。ありがとうござます。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

あ、なるほどです！そうですね、メディアクエリ（@media(...) の部分）は、セレクタを囲むように記述する必要があるんです。解決できたとのことでよかったです^^

トピッククローズします。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿