質問

Bootstrap 3を使ってレスポンシブレイアウトを構築しているのですが、画面サイズに応じていくつかのフォントサイズを調整したいのです。 このようなロジックを作成するために、メディアクエリをどのように使用すればよいでしょうか？

どのように解決するのですか？

ブートストラップ3

一貫性を保つために、BS3 で使用されるセレクタを紹介します。

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

注：参考までに、デバッグに便利な場合があります。

<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>

ブートストラップ4

以下は、BS4で使用されるセレクタです。 BS4では、"extra small"がデフォルトであるため、"lowest"の設定は存在しません。つまり、まずXSサイズをコード化し、その後でこれらのメディアをオーバーライドすることになります。

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

ブートストラップ5

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}

2021-05-20に更新しました。情報はバージョン 3.4.1, 4.6.0, 5.0.0 の時点でも正確です。