Можно ли использовать несколько одинаковых @media в css файле ?

Question

[nepster-web]

Работаю с адаптивной версткой, у меня все подстраивается примерно вот так:

/* ----------------------------------------------- */
@media (max-width: 639px) {


}


/* ----------------------------------------------- */
@media (min-width: 640px) and (max-width: 799px) {


}


/* ----------------------------------------------- */
@media (min-width: 800px) and (max-width: 999px) {
    
    
}


/* ----------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1199px) {
    
    
}


/* ----------------------------------------------- */
@media (min-width: 1200px) {
    
    
}

Однако есть много страниц, которые неободимо верстать, я бы не хотел мешать все в 1 файл и все страницы в 1 медиа. Поэтому будет ли правильно писать вот эти медиа для каждой страницы ?

Answer 1

[Александр]

Если правильно понял вопрос, то да можно никаких проблем это не вызовет.
Можете подглядеть это например в getbootstrap.com/dist/css/bootstrap.css

Answer 2

[Иван Беленков]

вы можете писать медиа хоть для каждого блока в отдельности. но это скорее всего будет медленно работать. я в работе обычно пишу медиа-запросы для каждого блока, а потом с помощью grunt сливаю их в один.

Answer 3

[Дмитрий Ермолаев]

одинаковые медиа запросы можно писать. если пользуетесь grunt'ом, то для него есть плагин, который

Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries.

Комбинирует одинаковые медиа запросы в один медиа запрос. Полезно для CSS сгенерированного с помощью препроцессоров с использованием вложенных медиа запросов. - (примерный перевод)

для Gulp'а наверное тоже что-нибудь есть