ストックドッグ

金融系の会社で働くSEが株やPython、その他諸々について書いています。サービスも運営してます→http://fmbrain.work

フォントサイズをレスポンシブ対応させるCSS

@media を使うと、CSSに条件を追加することができる。

これで状況によってCSSを変更することが可能に。

例えば、ブラウザのサイズによってフォントのサイズを変えたい時とか。つまり、レスポンシブ対応。

@mediaの使い方

@mediaのあとに条件を指定する。

なんとなく文法がjavascriptっぽい。

@media (min-width: 1200px) {

  html {
    font-size: 11px
  }

}

ブラウザのサイズが1200px以上であれば、フォントサイズを11pxに指定している。

CSS書いてみる

ブラウザはだいたい3タイプくらいを想定。

条件は以下に設定。

100px以上のブラウザサイズ:font-size:8px
768px以上のブラウザサイズ:font-size:10px
1200px以上のブラウザサイズ:font-size:11px

@media (min-width: 100px) {

  html {
    font-size: 8px
  }

}


@media (min-width: 768px) {

  html {
    font-size: 10px
  }

}


@media (min-width: 1200px) {

  html {
    font-size: 11px
  }

}

フォントをレスポンシブ対応させる意味

それは、単純に1200pxのPC画面と600pxのスマホ画面では、フォントサイズを変えたほうが見やすくなるから。

1200pxでちょうどいい大きさだと、600pxでは大抵大きすぎる。


試しにフォントサイズを変えてみる。


1200px以上のブラウザでは、フォントサイズが心地良い。

f:id:doz13189:20180519202349p:plain


しかし、このままのフォントサイズだとスマホでは、少々ブサイクになる。

f:id:doz13189:20180519202412p:plain


そのため、デフォルトのフォントサイズを12pxから8pxに。

f:id:doz13189:20180519202437p:plain


個人的にはこのサイズ感が心地良い。

まとめ

フォントサイズは、大きすぎると1つの画面に入る情報量が少なくなってしまうので、適切な大きさにしよう!

特にスマホは画面が小さいので、入れる情報の量はちゃんとコントロールしよう!


以上、終わり!!