レスポンシブだと、デザイン通りのテキストの改行が難しい場合があり、フォントサイズも%?px?em?rem?一体どれを使えばいいのって迷ってました。
でも今は考えるのがめんどくさいのでもっぱら「vw」で対応してます。
Sassで横幅に合わせて自動計算させれば勝手にCSSにデザイン通りのサイズがCSSでコンパイルできるというわけです。
そもそもvwってなんぞやって人はわかりやすい人のサイトで確認してください。
では、実際にどうすればいいのかやっていきましょう！
Sassで横幅に合わせてサイズの変わるテキストにする方法
横幅から文字サイズの割合を出すには「(フォントサイズ/デザインの幅)*100」。
これをSassで計算させます。
ただPCが時にブラウザ幅でそのまま大きくなってしまうので、「clamp」で最大値を決めるか、pxやremなどで決めた値にするのが望ましいです。
@mixin fontsize($fsize){
$windowW : 700;
font-size: ($fsize / $windowW) * 100 + vw;
}
フォントサイズ指定の際は「@include fontsize(デザインのフォントのサイズ);」とすれば自動で計算してCSSでコンパイルされます。
@include fontsize(30); //30pxの場合
これで端末で横幅が変わっても簡単にデザイン通りのフォントサイズに！
レスポンシブ対応はいろいろな対応の仕方があるんだな〜と思った今日このごろです。
ABOUT ME
