结合媒体查询混合的引导程序答案

【问题标题】：Bootstrap combining media query mixins结合媒体查询混合的引导程序
【发布时间】：2017-11-12 04:49:18
【问题描述】：

我正在使用带有 Less 的 Bootstrap 3 并且想知道以下是否是将多个媒体查询混合附加到一个类的正确方法？它似乎有效，但我不确定，因为我仍在学习 Less。

我通常只是在样式表底部的他们自己的断点查询中写入不同的 css。但是，有时我需要对事物进行更精细的控制，并且我认为在使用 BS 时这可能是一种更简洁的方法。

.title h1 {
text-align: center;
font-size: 30px;
font-weight: 400;
@media (min-width: @screen-sm-min) {
   font-size: 40px;
   }   
@media (min-width: @screen-md-min) {
   font-size: 40px;
   text-align: left;
   }  
@media (min-width: @screen-lg-min) {
   font-size: 50px;
   text-align: left;
   }
}

【问题讨论】：

那么如果它有效，是什么让你不确定？您可以查看 Bootstrap 源文件，看看它们使用的正是 same method。有有种不同的方法（E.G.），但如果问题是“这是一种正确的方法吗？”答案是“是的”。
谢谢。有时仅仅因为我可以得到一些工作并不意味着它是最佳方式:)。所以，因为我不使用 Less 和 mixin 来上课，我只是想确保它是正常/良好的做法。
另外，关于下面的答案，这就是我通常的做法。我认为上述方法可以帮助我更好地管理我的调整。

标签： css twitter-bootstrap less

【解决方案1】：

试试这个

.title h1 {
   text-align: center;
   font-size: 30px;
   font-weight: 400;
}


@media (min-width: @screen-sm-min) {
   .title h1 {
       font-size: 40px;
    }
}   
@media (min-width: @screen-md-min) {
   .title h1 {
      font-size: 40px;
      text-align: left;
    }
}  
@media (min-width: @screen-lg-min) {
   .title h1 {
      font-size: 50px;
      text-align: left;
    }
}

【讨论】：

这是我通常做的。我的问题更多是关于我上面描述的不同方式。我在想这可能是管理样式表的一种更清洁的方法。在 Less 方面，我仍在尝试找出最佳的做事方式。