レスポンシブで幅に合わせて自動でフォントサイズを変更する方法

web関連

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

 

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

 

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

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

 

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

 

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

 

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

 

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

コメント

タイトルとURLをコピーしました