Twitter Bootstrap 3：如何使用媒体查询？ [英] Twitter Bootstrap 3: how to use media queries?

问题描述

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

解决方案

这里是BS3中使用的选择器，如果您想保持一致：

  @media（max-width：767px）{} 
 @media -width：768px）{} 
 @media（min-width：992px）{} 
 @media（min-width：1200px）{} 
  pre> 
 
 
这里是BS4中使用的选择器。 在BS4中没有最低设置，因为额外的小是默认值。也就是说您将首先编写XS大小，然后在以后重写这些媒体。 
  @media（min-width： 576px）{} 
 @media（min-width：768px）{} 
 @media（min-width：992px）{} 
 @media（min-width：1200px）{} 
  
更新2017-01-19：BS3信息从版本3.3.7开始仍然准确，BS4更新新网格在4.0.0a6发布。
 
I'm using Bootstrap 3 to build a responsive layout where I want to adjust a few font sizes according to the screen size.
How can I use media queries to make this kind of logic?
解决方案
Here are the selectors used in BS3, if you want to stay consistent:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Update 2017-01-19: BS3 info is still accurate as of version 3.3.7, updated BS4 for new grid released in 4.0.0a6.

                        
这篇关于Twitter Bootstrap 3：如何使用媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！