max-widthでPC表示とスマホ表示を切り替え

今回はCSSにmax-widthを追加する方法でPC表示とスマホ表示のフォントサイズを切り替える方法を使用しました。

下記のstyleを自作のCSSに追加します。

@media (max-width: 991px) {
  h1, h2, h3, h4, h5, h6 {
    font-size: 18px;
  }
}

max-width: 991pxの指定で、横幅991px以下のhタグのフォントサイズを18pxにすることができます。

max-widthは「以上」、「以下」で切り替えることができるので便利な方法です。

今回はスマホだけではなくタブレットでのフォントサイズも変更しようと思い991pxで指定しました。

これでフォントサイズがPCとスマホ・タブレットで変更することができました。

max-width: 991px

このブログでは、CSSのフレームワークとしてbootstrap3を使用しているので、bootstrap3のブレイクポイントと合わせるためにmax-width: 991pxに指定しました。

bootstrap3では4個のブレイクポイントが設定されています。

• ・スマホ表示の767px以下
• ・タブレット表示の768px以上
• ・PC表示の992px以上
• ・さらに大きいPC表示の1200px以上

必要に応じてmax-widthに指定するpxを変更するとより限定的に表示を切り替えることができます。

bootstrap3のhタグの初期フォントサイズ

指初期設定では下記の通り指定されています。

• ・h1 セミボールド 36px
• ・h2 セミボールド 30px
• ・h3 セミボールド 24px
• ・h4 セミボールド 18px
• ・h5 セミボールド 14px
• ・h6 セミボールド 12px

PCからスマホ表示に切り替えてもデフォルトでは変更がないためスマホだとかなり大きいフォントサイズになってタイトルが読みにくくなってしまいます。当ブログもかなり大きいまま1年くらい放置していました。

・フォントサイズ変更前。

やはり大きすぎます。

スマホ表示の時も本文を16pxに設定しているので、タイトルタグは18pxくらいが丁度良い感じですよね。そもそも、スマホの文字のジャンプ率は0%でも良いかもしれないので、いずれにしろ24pxは大きすぎます。

・フォントサイズ変更後。

だいぶ見やすくなりました。ブログを運営するにあたり読みやすさはかなり優先順位が高いとわかっていたのですが…もっと早く対応しておくべきでした。