UPD. How media queries allow you to eat ice cream

Imagine that a father explains to his son when you can enjoy ice cream. Then media queries will sound like this:

 /* можешь есть мороженое */ nav ul li { background: url('http://placehold.it/2x2') repeat; } /* но в понедельник - нельзя */ @media (max-width: 480px) { nav ul li{ background: none} } /* и во вторник - тоже нельзя */ @media (max-width: 767px) { nav ul li{ background: none} } /* в среду и четверг - разумеется, нельзя */ @media (min-width: 768px) and (max-width: 991px) { nav ul li{ background: none} } /* а в пятницу делай, как я сказал */ @media (min-width: 992px) and (max-width: 1199px) { } /* и на выходных делай, как я сказал */ @media (min-width: 1200px) { } 

Media queries are needed when things change.

Your code describes a single change:

Starting from 992px add a background image to the links.

But it takes disproportionately small intervals for this and adds a check from the top and (max-width: ...) to each check from below (min-width: ...) and (max-width: ...) . It turns out too many instructions. The code will be hard to read and maintain.

Bootstrap works in mobile first logic. First, we define the styles for the narrowest screens. Then we redefine them when the screen reaches the width we need. It turns out like this:

 /* вообще-то тебе мороженого нельзя */ nav ul li { background: none } /* но начиная с пятницы - ладно, угощайся */ @media (min-width: 992px) { nav ul li { background: url('http://placehold.it/2x2') repeat; } } 

This code is equivalent to yours. Its media query is valid for both MD and LG , because it checks only the lower limit of the interval.

We take into account the default

If the preceding styles did not specify a background for the links, then the string nav ul li { background: none } also not needed. Enough so:

 @media (min-width: 992px) { nav ul li { background: url('http://placehold.it/2x2/cfc/&text=%20') repeat; } } 

 <nav> <ul> <li><a href="#">Фон ссылок станет зелёным</a></li> <li><a href="#">при ширине экрана от 992px</a></li> </ul> </nav>