how to avoid repetition of rules in Bootstrap 3.3.6 for XS SM



  • nav ul li {
        background: url('http://placehold.it/2x2') repeat;
    }
    
    /* Portrait phones and smaller XS */
    @media (max-width: 480px) {
        nav ul li{ background: none}
    }
    
    /* Landscape phones and portrait tablets  XS*/
    @media (max-width: 767px) {
        nav ul li{ background: none}
    }
    
    /* SM */
    @media (min-width: 768px) and (max-width: 991px) {
        nav ul li{ background: none}
    }
    
    /* MD */
    @media (min-width: 992px) and (max-width: 1199px) {
    
    }
    
    /* LG */
    @media (min-width: 1200px) {
    
    }
    


  • UPD. As a copper request, ice cream can be eaten.

    Let's see what my father tells his son when you can get ice cream. Then the media questions will sound like:

    /* можешь есть мороженое */
    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 demand is necessary when something changes.

    Your code describes a single change:

    Starting from 992px, add a background image to the references.

    But he's taking disproportionate time intervals and every understate inspection. (min-width: ...) adds to the top test. and (max-width: ...)♪ There are too many instructions. The code will be hard to read and accompany.

    Butstrup works in logic. mobile first♪ First we define the styles for the narrowest screens. Then we redesign them when the screen reaches the width we need. It happens:

    / вообще-то тебе мороженого нельзя */
    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. His media request is also in place. MDand for LGBecause only checks the lower interval.

    We'll take the meaning of default.

    If references were not given in previous styles, the line nav ul li { background: none } No need. Enough:

    @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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2