Как правильно использовать @media?

Question

[drtvader]

Добрый всем.
Для разрешения с 1920 до 600 пикселей необходимо, что бы работали определённые стили.
При разрешении от 958px включается mobile.min.less, в котором прописаны стили для разрешения 480 пикселей.
Проект собирается через gulp. В main.less имеется

// media
@desktop-xxl: ~"all and (max-width: 1919px)";
@desktop-xl: ~"all and (max-width: 1599px)";
@desktop-lg: ~"all and (max-width: 1279px)";
@desktop: ~"all and (max-width: 1023px)";
@tablet-lg: ~"all and (max-width: 959px)";
@tablet-md: ~"all and (max-width: 767px)";
@tablet-sm: ~"all and (max-width: 639px)";
@phone: ~"all and (max-width: 479px)";
// Import user's LESS
@import "concat-less/bem.desktop.less";
@media @desktop-xl {
    @import "concat-less/bem.tablet.less";
}
@media @desktop-lg {
    @import "concat-less/bem.mobile.less";
}
@media @tablet-lg {
@import "concat-less/bem.mobile.min.less";
}
@media @tablet-lg {
    @import "concat-less/bem.tablet.less";
}

Что посоветуете? Что сделать, что бы при определенном разрешении включались нужные мне стили.

Answer 1

[Котик Антон]

@media (min-width: 600px) and (max-width: 1920px) {
    /* ... */
}

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

Comments

[Котик Антон]

drtvader: Может куда-то не туда вставляете. При компиляции less в css что за ошибку выдаёт?

[drtvader]

27cm: ошибку не выдает, просто не работает media, стили загрузились на 5 раз.
Вставляю в декстопный файл.

[Котик Антон]

drtvader: Так в слепую, не видя всей картины, что куда вы вставляете, ничем помочь не могу.

[drtvader]

Заработало. Спасибо!