启动.如何更改不同 col-* 大小的样式

Question

例如，

如何在调整浏览器窗口大小时更改引导程序中的文本大小？或者如果 col-xs 如何使其更小，如果 col-md 则更大？

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

我应该使用：

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

Answer 1

是的，使用媒体查询可以执行此操作。

.HTML：

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

.CSS：

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

有关媒体查询的更多信息，请参阅此内容

Answer 2

我经常遇到这种情况（通常根据媒体大小更改文本对齐方式），这是我在引导程序中使用的方法。 马上，唯一的缺点是复制了div 中的内容。 但是，这可以通过将内容存储为 Razor 变量或使用 jQuery 轻松解决。我不一定喜欢这种方法，但我发现它是解决这个问题的最佳方法。

另外需要注意的另一件事是，在使用 bootstrap 时，我经常明确地编写四个引导程序媒体大小案例中的每一个，只是为了抛弃解释性的猜测工作，即使它是多余的。

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

Answer 3

您可以使用

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;
}

请参阅视口大小的版式