Twitter Bootstrap 3：如何使用媒体查询？

Question

我正在使用Bootstrap 3构建响应式布局，在该布局中我想根据屏幕尺寸调整一些字体大小。我如何使用媒体查询来进行这种逻辑？

Answer 1

如果要保持一致，以下是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){}

更新2019-02-11：BS3信息从3.4.0版本开始仍然是准确的，更新了BS4对于新网格的信息，从4.3.0开始是准确的。