[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS(Responsive Font Size)」を紹介します。
Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。

ビューポートのサイズに基づいて、フォントに適切なサイズを自動的に適用

RFS(Responsive Font Size) -GitHub

RFS(Responsive Font Size)の特徴

RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。

  • フォントのサイズは、スクリーンやデバイスごとに最適化されます。
  • フォントのサイズには下限と上限があり、小さく・大きくなりすぎるのを防ぎ、リーダビリティを確保します。
  • 使い方は簡単、font-size mixinを使用するだけ。
  • ベースのサイズや単位、ブレークポイントの定義など、カスタマイズも簡単。
  • MITライセンスで、個人でも商用でも無料で利用できます。

フォントのサイズがどのように変化するかは、下記のグラフをご覧ください。
※サイズの単位はpx, remが選択でき、デフォルトはremです。

RFSで、フォントのサイズがどのように変化するか

RFSで、フォントのサイズがどのように変化するか

RFS(Responsive Font Size)のデモ

シンプルなデモと実際のレイアウトを想定したデモの2種類が用意されています。

デモのキャプチャ

シンプルなデモ

デモのキャプチャ

Bootstrapのデモ

RFS(Responsive Font Size)の使い方

Step 1: インストール

RFSはパッケージマネージャを使ってインストールすることができます。

  • npm
    npm install rfs
  • yarn
    yarn add rfs
  • bower
    bower install rfs --save

ソースファイルは手動でダウンロードして使用することもできます。しかし、RFSを簡単に管理および更新する機能を失うため、お勧めできません。

Step 2: 使い方

.scssの構文

.sassの構文

PostCSS

Less

Stylus

生成されるCSS

Webpackを使用している場合は、接頭辞~を使用して@importを単純化できます。

Step 3: 設定

設定を変更することなくそのまま使用できますが、微調整する必要がある場合は、下記のようにします。

ベースのフォントサイズ(px or rem)

  • SCSS, Sass & Stylus: $rfs-base-font-size
  • Less: @rfs-base-font-size
  • PostCSS: baseFontSize
  • デフォルトの値: 1.25rem

フォントサイズの単位(px or rem)

  • SCSS, Sass & Stylus: $rfs-font-size-unit
  • Less: @rfs-font-size-unit
  • PostCSS: fontSizeUnit
  • デフォルトの値: rem

ブレークポイント(px, em or rem)

  • SCSS, Sass & Stylus: $rfs-breakpoint
  • Less: @rfs-breakpoint
  • PostCSS: breakpoint
  • デフォルトの値: 1200px

ブレークポイントの単位(px, em or rem)

  • SCSS, Sass & Stylus: $rfs-breakpoint-unit
  • Less: @rfs-breakpoint-unit
  • PostCSS: breakpointUnit
  • デフォルトの値: px

サイズ変更の係数(number)

  • SCSS, Sass & Stylus: $rfs-factor
  • Less: @rfs-factor
  • PostCSS: factor
  • デフォルトの値: 10

2次元メディアクエリ(boolean)

  • SCSS, Sass & Stylus: $rfs-two-dimensional
  • Less: @rfs-two-dimensional
  • PostCSS: twoDimensional
  • デフォルトの値: false

class生成(boolean)

  • SCSS, Sass & Stylus: $rfs-class
  • Less: @rfs-class
  • PostCSS: class
  • デフォルトの値: false

Safariのiframeサイズ変更のバグ修正(boolean)

  • SCSS, Sass & Stylus: $rfs-safari-iframe-resize-bug-fix
  • Less: @rfs-safari-iframe-resize-bug-fix
  • PostCSS: safariIframeResizeBugFix
  • デフォルトの値: false

使用にあたっての注意点

  • html要素には定義しないでください。
    remの値に影響を及ぼし、予期しない結果につながる可能性があります。
  • 行間の問題を防ぐために、常にline-heightを(emまたは単位無しで)相対値で定義してください。

sponsors

top of page

©2019 coliss