今回実現したいこと

• デバイスサイズに応じて良い感じに可変するフォントサイズを実現する
• フォントサイズの大きくなりすぎ、小さくなりすぎを防ぐために最大値と最小値を設ける
• mixinを用いて、誰でも簡単に導入できる

では早速、コードとデモを見ていきましょう。

コードとデモ

See the Pen zYrJGxJ by ito / FLAT Inc. (@flat_ito) on CodePen.

見ての通り、Sassの変数や関数を使用しています。今回は、こちらのmixinの使用方法に焦点を当てているので、Sassのコード解説は割愛します。

デモの例では、pタグに対してCSSを指定しています。
デバイスサイズ500px以下でフォントサイズが16pxに固定。また、デバイスサイズが1000px以上でフォントサイズが32pxに固定されます。500px〜1000px間は、フォントサイズが16px〜32pxの間で良い感じに可変していることが確認できます。

また、同時に複数のプロパティを可変させたい場合は@eachを使用する形になります。下記を参照してください。

See the Pen zYrJGxJ by ito / FLAT Inc. (@flat_ito) on CodePen.

使用方法

mixin部分はコピペで使用できます。また、デモの使用例を参考に、CSSを付与したいセレクタに@includeを指定します。具体的には下記のように指定しましょう。

.selector{@includeresponsive("プロパティ名","デバイスの最小幅","デバイスの最大幅","最小値","最大値");}

今回はフォントサイズを可変にしましたが、上記のプロパティ名を変更することでフォントサイズ以外も可変にすることができます。例えば、marginやpaddingなどですね。

まとめ

今回は、可変フォントサイズをmixinで誰でも簡単に導入できる方法を紹介しました。
すべてのフォントサイズを可変にすることはオススメしませんが、要所要所で利用できると便利だと思います。是非使ってみてください！

Twitterアカウント

Twitterも更新していますので、よかったらフォローお願いします！
Twitterアカウントはこちら