Bootstrap, объединяющий миксины медиа-запросов

Я использую Bootstrap 3 с Less и задаюсь вопросом, является ли приведенный ниже правильный способ присоединения нескольких миксинов медиа-запросов к классу? Кажется, это работает, но я не уверен, так как все еще изучаю 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;
   }
}

css twitter-bootstrap less
person Work-Together2013    schedule 31.07.2014    source источник
comment
Итак, если это работает, что заставляет вас сомневаться? Вы можете взглянуть на исходные файлы Bootstrap, чтобы убедиться, что они используют именно тот же метод. Существуют различные методы (например,), но если вопрос в том, это правильный путь? ответ да, это так.   -  person seven-phases-max    schedule 01.08.2014
comment
Спасибо. Иногда то, что я могу заставить что-то работать, не означает, что это оптимальный способ :). Итак, поскольку я не использую Less и миксин для классов, я просто хочу убедиться, что это нормальная/хорошая практика.   -  person Work-Together2013    schedule 01.08.2014
comment
Кроме того, что касается ответа ниже, я обычно так и делаю. Я думаю, что описанный выше подход может помочь мне лучше управлять моей настройкой.   -  person Work-Together2013    schedule 01.08.2014

Ответы (1)


arrow_upward
0
arrow_downward

Попробуй это

.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;
    }
}
person Jeff    schedule 31.07.2014
comment
Это то, что я обычно делаю. Мой вопрос был больше о другом способе, который я описал выше. Я думал, что это может быть более чистый подход к управлению вашей таблицей стилей. Что касается Лесса, я все еще пытаюсь найти наиболее оптимальный способ сделать что-то. - person Work-Together2013; 01.08.2014