我正在使用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>
这是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开始是准确的。