一尘不染

Twitter Bootstrap 3:如何使用媒体查询?

css

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


阅读 319

收藏
2020-05-16

共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){}

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

2020-05-16