media query css

1@media only screen and (max-width: 1200px){
2    /*Tablets [601px -> 1200px]*/
3}
4@media only screen and (max-width: 600px){
5	/*Big smartphones [426px -> 600px]*/
6}
7@media only screen and (max-width: 425px){
8	/*Small smartphones [325px -> 425px]*/
9}

1/* Max-width */
2@media only screen and (max-width: 600px)  {...}
3
4/* Min-width */
5@media only screen and (min-width: 600px)  {...}
6
7/* Combining media query expressions */
8@media only screen and (max-width: 600px) and (min-width: 400px)  {...}

1@media only screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

1@media only screen and (max-width: 768px) { }

1
2media screen and (min-width: 1300px) {
3media screen and (min-width: 400px) and (max-width: 700px) {
4

1
2  /* These classes can be added to HTML Elements
3   * to affect visibility on certain displays.
4   */
5  .hide-on-small-only
6  .hide-on-small-and-down
7  .hide-on-med-and-down
8  .hide-on-med-and-up
9  .hide-on-med-only
10  .hide-on-large-only
11  .show-on-large
12  .show-on-medium
13  .show-on-small
14  .show-on-medium-and-up
15  .show-on-medium-and-down
16