フォントサイズを横幅で自動変更させる方法【Sass】

レスポンシブのサイトを作ることが多くなりましたね。
そこでremだったり、vwだったりサイズを指定する単位も多様化しました。

そこで今回は、運動の幅に合わせてフォントサイズが変動する指定方法をSassで紹介します。

ウィンドウ幅でフォントサイズを自動変更

では早速コードから。

 

@mixin fontsize($fsize){
  $windowW : 700;
  font-size: ($fsize / $windowW) * 100 + vw;
}

 

こんな感じで「(フォントサイズ/デザインの幅)*100」でフォントサイズを割り出してSassで計算しています。
使用する際は、

 

@include fontsize(30); //30pxの場合

 

このように記述し、デザインでのフォントサイズを入力するだけでOK!

 

フォントサイズを横幅で自動変更させるメリット

横幅に合わせてフォントサイズが小さくなるので、基本改行が変わりません。
デザイン通りに改行変えないで！という要望に答えやすいです。

 

今だとremを使うことが多いですが、１つの選択肢として使用してみて下さい！