※本ページはプロモーションを含みます
はじめに
レスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？
この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。
CSSではなくnode製altcssのstylusのコードになります。
各要素に気軽に設定できるようにmixinになっています。
stylusとは
SASSやLESSなどと同じALTCSSの１つです。node製で最終的にcssファイルを生成します。コロンやセミコロン、ブランケットを省略することができ入力手数をかなり軽量化することができます。
またmixinというオリジナル関数を作成し使いまわすことができます。
▼stylus
https://stylus-lang.com/
結論コード
早速、出来上がったコードです。
rfz(min, max)
// レスポンシブフォントサイズ
// 計算方法はclamp calculator参照
// <https://chrisburnell.com/clamp-calculator/>
vmin = 320
vmax = 1280
root = 16
rate = (max - min) / (vmax - vmin)
a = unit((max - vmax * rate) / root, 'rem')
b = unit(100 * rate, 'vw')
font-size 'clamp(%s, %s + %s, %s)' % (unit(min, 'px') a b unit(max, 'px'))
使い方
.heading-1
rfz(24, 32)
.heading-2
rfz(20, 28)
.heading-2
rfz(18, 24)
まず変化に対応する画面サイズをmixin内で設定します。
今回の場合は最小サイズを320px、最大サイズを1280pxにしています。
例でいうと.heading-1というクラスを与えた要素は24pxが下限、32pxを上限として画面幅に合わせた文字サイズになります。
補足
clamp-calculatorというサイトを参考に計算しています。
▼clamp-calculator
https://chrisburnell.com/clamp-calculator/
