What is the correct way to use @media?

Question

css

Kind everyone.
For a resolution from 1920 to 600 pixels, certain styles need to work.
At a resolution of 958px, mobile.min.less is enabled, which contains styles for a resolution of 480 pixels.
The project is built using gulp. main.less has

// 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";
}

What do you advise? What can I do so that at a certain resolution the styles I need are included.

Answer 1

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

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