RFS

Bootstrapのリサイズエンジンは、一般的なCSSプロパティをレスポンシブに拡張し、ビューポートやデバイスで利用可能なスペースをより有効に活用します。

項目

RFSって何？

BootstrapのサイドプロジェクトであるRFSは、元はフォントサイズをリサイズするために開発されたリサイジングエンジンです (RFSはResponsive Font Sizeの略称です)。今ではRFSは、margin、padding、border-radius、box-shadowといった、ほとんどのCSSプロパティをリスケーリングできます。

適切なサイズを自動的に計算する仕組みは、ブラウザのビューポートのサイズを基にしています。値をremやビューポートのサイズを含んだ calc()関数にコンパイルすることで、レスポンシブルなスケーリングを実現しています。

RFSの使用する

RFSのmixinはBootstrapに含まれており、Bootstrapのscssをインクルードすることで利用可能になります。RFSは必要であれば個別にインストールすることもできます。

Mixinsを使用する

rfs()mixinはfont-size、margin、margin-top、margin-right、margin-bottom、margin-left、padding、padding-top、padding-right、padding-bottom、そしてpadding-leftのショートカットを持っています。ソースのSassとそれをコンパイルしたCSSの例は以下です。

.title {
  @include font-size(4rem);
}

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

rfs()には以下のように様々なプロパティを渡すことができます:

.selector {
  @include rfs(4rem, border-radius);
}

!importantを追加することも可能です:

.selector {
  @include padding(2.5rem !important);
}

Functionsを使用する

インクルードしたくない場合は、別の手段として2つの関数があります:

rfs-value()はpx値が渡された場合にrem値に変換します。それ以外の値に対しては同じ値を返します。
rfs-fluid-value()はプロパティがリスケーリングする必要があった場合に、リスケーリング可能な式に変換します。

以下の例では、lgブレークポイント下でのみ適用したいスタイルの実装にBootstrapビルトインのレスポンシブルなブレークポイントmixinを利用しています。

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

拡張されたドキュメント

RFSはBootstrap組織下の別のプロジェクトです。RFSやその設定について詳しく知りたい場合は、GitHubリポジトリをご覧ください。