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リポジトリをご覧ください。