レスポンシブだと、デザイン通り難しい場合もあるし、フォントサイズも%?px?em?rem?一体どれを使えばいいのって迷ってました。
でも今は考えるのがめんどくさいのでもっぱら「vw」で対応してます。
これでSassで横幅に合わせて自動計算させれば勝手にCSSにデザイン通りのサイズがCSSでコンパイルできるというわけです。
そもそもvwってなんぞやって人はわかりやすい人のサイトで確認してください(投げやり)

では、実際にどうすればいいのかやっていきましょう!

Sassで横幅に合わせてサイズの変わるテキストにする方法

横幅から文字サイズの割合を出すには「(フォントサイズ/デザインの幅)*100」。
これをSassで計算させます。

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

フォントサイズ指定の際は「@include fontsize(デザインのフォントのサイズ);」とすれば自動で計算してCSSでコンパイルされます。

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

これで端末で横幅が変わっても簡単にデザイン通りのフォントサイズに!
レスポンシブ対応はいろいろな対応の仕方があるんだな〜と思った今日このごろです。

関連記事