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

when write style in layout.css applies in every screen size , in /* #media queries section, have these sections:

/* smaller standard 960 (devices , browsers) */ /* tablet portrait size standard 960 (devices , browsers) */ /* mobile sizes (devices , browser) */ /* mobile portrait size mobile landscape size (devices , browsers) */ 

so none of these want.

where should write large screen specific css codes?

suppose have div <div claas="example"> </div>

now write css .example applied screen larger range mentioned in media query

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

in above code mention 3 different styles

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

edit::

"/* larger standard 960 (devices , browsers) */"

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