Bootstrap。如何更改不同颜色大小的样式？

Question

我怎样才能改变例如文本大小在引导而调整浏览器窗口？或者如果col-xs更小，如果col-md更大，怎么样？

<div class="col-xs-6 col-md-3"> 
text 
</div> 

我应该使用：

@media (min-width: 991px) { 
} 

Answer 1

是使用媒体查询，你可以做到这一点。

HTML：

​​

CSS：

@media screen and(min-width: 991px) { 
    .sometext { 
     font-size:10px ; //for example 
    } 
} 

Refer this for more information on media queries

Answer 2

可以使用vw units做到这一点。

例如，一个<p>标签：

p { 
    font-size: 30px; 
    font-size: 3.5vw; 
} 

或..

h1 { 
    font-size: 5.9vw; 
} 
h2 { 
    font-size: 3.0vh; 
} 
p { 
    font-size: 2vmin; 
} 

见Viewport Sized Typography

Answer 3

我碰上这种频繁（通常是基于媒体的大小更改文本对齐），这是我用bootstrap的方法。马上，唯一的缺点是div中的内容被复制。但是，通过将内容存储为Razor变量或使用jQuery，这很容易解决。我不一定喜欢这种方法，但我发现它是解决这个问题的最好方法。

另外还有一点要注意的是，使用引导时，我经常写明确各四个引导介质尺寸的情况下只是抛出了解释猜测工作，即使它是多余的。

.sometext { 
    font-size: 10px; 
    } 

<div class="col-xs-6 col-sm-6 hidden-md hidden-lg"> 
text 
</div> 

<div class="hidden-xs hidden-sm col-md-3 col-lg-3 sometext"> 
text 
</div>