media queries : limit some css styles according to the screen size

问题

when I write some style in layout.css it applies in every screen size and in /* #Media Queries section, you have these sections:

/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

so none of these do what I want.

Where should I write large screen specific css codes?

回答1:

suppose you have a div like <div claas="example"> </div>

now write a css for .example which will be applied for those screen which are larger than range you mentioned in your media query

.example{
  /*..for larger screen style goes here....*/
 }
@media screen and (max-width: 1400px) { 
  .example {
    /*...now give style for those screen which are less than 1400px...*/
  }
}
@media screen and (max-width: 1300px) {
  .example {
    /*...now give style for those screen which are less than 1300px...*/
  }
}

in the above you code you mention three different styles for

1. >1400px screen size
2. for 1300 to 1400px screen size
3. <1300px screen size

EDIT::

"/* Larger than standard 960 (devices and browsers) */"

.example{
  /*..style for larger than 960px....*/
 }
@media screen and (max-width: 960px) { 
  .example {
    /*..style for lesser than or equal to 960 px...*/
  }
}

来源：https://stackoverflow.com/questions/18161815/media-queries-limit-some-css-styles-according-to-the-screen-size