how to setup media query

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

1// Example media query syntax
2@media only screen and (min-width: 768px) {
3  .my-example-class {
4    padding: 50px;
5  }
6}
7
8// Best Practice
9// keep default style for smallest screen size (portrait mobile, below 576px)
10// and then proceed in assending order with media query like below
11
12// Small devices (landscape phones, 576px and up)
13@media (min-width: 576px) { ... }
14
15// Medium devices (tablets, 768px and up)
16@media (min-width: 768px) { ... }
17
18// Large devices (desktops, 992px and up)
19@media (min-width: 992px) { ... }
20
21// so on ...

1@media only screen and (max-width: 600px) {
2  .class {
3    // Your CSS
4  }
5}

1* Extra small devices (phones, 600px and down) */
2@media only screen and (max-width: 600px) {}
3
4/* Small devices (portrait tablets and large phones, 600px and up) */
5@media only screen and (min-width: 600px) {}
6
7/* Medium devices (landscape tablets, 768px and up) */
8@media only screen and (min-width: 768px) {}
9
10/* Large devices (laptops/desktops, 992px and up) */
11@media only screen and (min-width: 992px) {}
12
13/* Extra large devices (large laptops and desktops, 1200px and up) */
14@media only screen and (min-width: 1200px) {}
15