[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅（vw）に対して文字サイズを変化させる

サイト構築 -CSS

Post on:2017年3月10日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅（vw）に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。

例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。

Responsive font calculator

先日、紹介した「ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック」のスタイルシートを自動で生成します。
ゼロからスタイルシートを記述すると、計算が面倒ですが、これなら超簡単です。

Responsive font calculator

ツールの使い方は、簡単です。

Units

フォントのサイズ指定に使う単位を「px, rem, em」から選択。
Selector

「font-size」を適用するセレクタを記述（id, class など)。
Font-size

フォントが拡大縮小する範囲を指定。
Viewport width

フォントのサイズに対応するビューポート幅を指定。
Options

コメントの有無、サイズの最大値を超えないように指定

スタイルシートは、下記のように生成されます。

/* 16px @ 480px increasing to 32px @ 1920px */
@media (min-width: 480px) {
  :root {
    font-size: calc(100% + ((1vw - 4.8px) * 1.1111));
    /* Where: * 1.1111 = 100 * font_Size_Difference / viewport_Width_Difference */
  }
}
/* Prevent font scaling beyond this breakpoint */
@media (min-width: 1920px) {
  :root {
    font-size: 32px;
  }
}