Sassを使ってfont-sizeのvw単位をわかりやすくする方法

ここではSassを用いて、計算が複雑なvw単位をわかりやすくする方法を紹介します。

　

font-sizeに「vw」を指定するシーンというのはそんなに多くないのかなとも思いますが、例えばTOP画像のキャッチコピーのように、背景の上に文字を乗せるときなどですね。

テキスト部分にfont-sizeでvwを使い、画面幅の縮小に合わせて文字も自然に小さくすることができます。

　　

メディアクエリで幅ごとにfont-sizeを指定して対応する方法もありますが、vw単位を使うと細かいメディアクエリの設定が不要になるので便利です。

記述方法　

Sassファイルにベースで記述するものは以下のコードです。

 $baseWidth : 1920;
 @function vw($pixelsVw) {
    @return $pixelsVw / $baseWidth * 100vw;
   }

「$baseWidth」の数値はデザインカンプの幅によって変えてください。

上記は1920pxとしています。

　

1920pxの幅で作られたデザインカンプで、ある要素のフォントサイズが40pxで指定されていた場合、以下のようにfont-sizeを記述します。

 p {
     font-size: vw(40);
 }

これが出力されると、CSSではfont-sizeが2.08333vwとなります。

そしてブラウザ上では1920pxの画面幅でfont-sizeがちょうど40pxとなります。

　

実際同条件で普通にvwの計算をすると以下のような式です。

40 / 1920 * 100vw = 2.083333vw ≒ 40px

vw指定の際の注意点

vw指定の際に注意しなければいけないのが「画面幅が極端に大きく（小さく）なると文字も大きく（小さく）なりすぎる」ことです。

　

ここでは1921px以上になると、font-sizeも40pxよりさらに大きくなるので全体的な見栄えが悪くなってしまいます。

　

ですのでvwの上限と下限を決めて、それらを境にfont-sizeが一定になるように指定します。

 p {
     font-size: vw(40);
     @media screen and (min-width: 1921px) {
         font-size: 40px;
     }
     @media screen and (max-width: 999px) {
         font-size: 24px;
     }
 }

　

上記の例でいうと1000px~1920pxの間ではvwを採用し、それ以外は指定したpx値にするという記述です。

Sassを使っているので、mixinでミディアクエリを書いたり、別の記事で紹介しているrem指定の方法を使って私は以下のように書いています。

 p {
     font-size: vw(40);
     @include media (base) {
         font-size: rem(40);
     }
     @include media (l) {
         font-size: rem(24);
     }
 }

@include media (base)で「@media screen and (min-width: 1921px)」、@include media (l)で「@media screen and (max-width: 999px)」を出力するようにしています。

　　

ちなみにvw単位は最近のブラウザではほぼ問題なく使用できますが、IE8以下、Android4.3以下などでは非対応です。

これらに対応させる場合は、vwとは別にpxでの指定も書き加えなければいけませんね。

　

以上、Sassを使ってfont-sizeにvwを指定する方法でした。