Sassを使ってfont-sizeのvw単位をわかりやすくする方法 | WebデザイナーどうでしょうここではSassを用いて、計算が複雑なvw単位をわかりやすくする方法を紹介します。 font-sizeに「vw」を指定するシーンというのはそんなに多くないのかなとも思いますが、例えばTOP画像のキャッチコピーのように、背景の上に文字を乗せるときなどですね。 テキスト部分にfont-sizeでvwを使い、画面幅の縮小に合わせて文字も自然に小さくすることができます。 メディアクエリで幅ごとにfont-sizeを指定して対応する方法もありますが、vw単位を使うと細かいメディアクエリの設定が不要になるので便利です。 記述方法 Sassファイルにベースで記述するものは以下のコードです。 $baseWidth : 1920; @function vw($pixelsVw) { @return $pixelsVw / $baseWidth * 100vw; } 「$baseWidth」の数値はデザインカ
