css - 推特 Bootstrap 3 : how to use media queries?

Question

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

Answer 1

Bootstrap 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>

Bootstrap 4

这是 BS4 中使用的选择器。 BS4 中没有“最低”设置，因为“特小”是默认设置。 IE。您将首先对 XS 尺寸进行编码，然后再进行这些媒体覆盖。

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

Bootstrap 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 开始，信息仍然准确。