Bootstrap 3 を使用して、画面サイズに応じていくつかのフォント サイズを調整するレスポンシブ レイアウトを構築しています。このようなロジックを作成するには、メディア クエリをどのように使用すればよいでしょうか。
ベストアンサー1
ブートストラップ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には「極小」がデフォルトであるため、「最低」設定はありません。つまり、最初に 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.3.0 時点でも正確です。