画面幅に応じてフォントサイズを可変にする。

vwでフォントサイズを指定(ブラウザ幅に対してフォントサイズが可変)

おおから

例、文字サイズ(一文字分)は、ブラウザ幅の9%のpxサイズで可変する。

vw =(基準となる文字サイズpx)÷(基準となるブラウザ幅px)× 100
例:ブラウザ幅900pxの時に30pxで表示したい = 30÷900×100 = 3.3vw
  常にブラウザ幅の3.3%のpxのフォントサイズに可変する。

フォントサイズを可変にしつつ、文字サイズの最小値と最大値を指定する

おおから

例、文字サイズ(一文字分)は、最小80px ~ 最大180pxの間で、ブラウザ幅の10%のpxサイズで可変する。

font-size: clamp(最小値, 基準値, 最大値);
上の例:font-size: clamp(80px, 10vw, 150px); 
文字サイズは70px~150pxの間で、ブラウザ幅の10%のpxサイズで可変する。

 ※clamp()関数は、width、hight、margin、paddingなど、フォントサイズ以外でも使うことができる。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次