Question

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

Bootstrap结合媒体查询混合

1 个答案: