css - Bootstrap 结合媒体查询混合

Question

我正在使用带有 Less 的 Bootstrap 3，我想知道下面的方法是否是将多个媒体查询 mixins 附加到一个类的正确方法？它似乎有效，但我不确定，因为我仍在学习 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;
   }
}

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