Bootstrap v4.3から、デバイスやビューポートのサイズに合わせてフォントサイズを変更することが出来る「レスポンシブ・フォントサイズ」に対応しています。ドキュメントを読むと、
RFSは、 $enable-respond-font-sizes Sass変数を true に変更してBootstrapを再コンパイルすることで有効になる
と書いてあります。
Laravelの場合、Bootstrapのソースコードはnode_modulesディレクトリ以下にあり、そこに設定ファイルもあるのですが、このディレクトリはレポジトリに登録されていないために環境によってかわることがあるし、Nodeのトラブルを解決する為に削除→再インストールをされることもあるディレクトリです。なので、ここの設定を変更してもあんまり意味がありません。
ていうかそもそも「laravel/node_modules/bootstrap/scss/vendor/_rfs.scss」では、
// Disable RFS by setting $enable-responsive-font-sizes to false
$enable-responsive-font-sizes: true !default;となっていて最初から有効になってます。そうなのねー
というわけで、Laravelでの使用方法
Laravelプロジェクトを作成すると、「laravel/resources/sass/_variables.scss」というファイルが作られます。ここに、$enable-responsive-font-sizes: true;という設定を追加して、
npm run devとすることで、レスポンシブ・フォントサイズが有効になります。
「レスポンシブ・フォントサイズ」が有効になると
レスポンシブ・フォントサイズが有効になると、- h1からh4までの見出し
- クラス「display-1」「display-2」「display-3」「display-4」
- クラス「close」
のフォントサイズが、ビューポートの大きさに応じて拡大縮小されます。
実際のソースはこんな感じになっているので、
@media (max-width: 1200px) {
h4,
.h4 {
font-size: calc(1.26rem + 0.12vw);
}
}
ウィンドウサイズが1,200px以下の場合において、基準値に対してビューポートの割合分増加されるという感じでしょうか。h5タグとh6タグは適用されませんが、上と同じような設定を書けば実現出来ます。
対応しているのはモダンなブラウザだけですが、個々に調整出来るのは便利ですね。
