フォントサイズをレスポンシブ対応させる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以上のブラウザでは、フォントサイズが心地良い。

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

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

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

まとめ

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

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

以上、終わり！！