css media query

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@media only screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

1/* BOOSTRAP MEDIA BREAKPOINTS */
2/* Small devices (landscape phones, 576px and up) */
3@media (min-width: 576px) {  
4  .selector {
5  	background-color:#f00;
6  }
7}
8/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
9@media (min-width: 768px) {}
10/* Large devices (desktops, 992px and up) */
11@media (min-width: 992px) {}
12/* Extra large devices (large desktops, 1200px and up) */
13@media (min-width: 1200px) {}

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: 768px) { }

1/* (320x480) iPhone (Original, 3G, 3GS) */
2@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
3    /* insert styles here */
4}
5 
6/* (320x480) Smartphone, Portrait */
7@media only screen and (device-width: 320px) and (orientation: portrait) {
8    /* insert styles here */
9}
10 
11/* (320x480) Smartphone, Landscape */
12@media only screen and (device-width: 480px) and (orientation: landscape) {
13    /* insert styles here */
14}
15 
16/* (480x800) Android */
17@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
18    /* insert styles here */
19}
20 
21/* (640x960) iPhone 4 & 4S */
22@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
23    /* insert styles here */
24}
25 
26/* (720x1280) Galaxy Nexus, WXGA */
27@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
28    /* insert styles here */
29}
30 
31/* (720x1280) Galaxy Nexus, Landscape */
32@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
33    /* insert styles here */
34}
35 
36/* (1024x768) iPad 1 & 2, XGA */
37@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
38    /* insert styles here */
39}
40 
41/* (768x1024) iPad 1 & 2, Portrait */
42@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
43    /* insert styles here */
44}
45 
46/* (1024x768) iPad 1 & 2, Landscape */
47@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
48    /* insert styles here */
49}
50 
51/* (2048x1536) iPad 3 */
52@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
53    /* insert styles here */
54}
55 
56/* (1280x720) Galaxy Note 2, WXGA */
57@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
58    /* insert styles here */
59}
60 
61/* (1366x768) WXGA Display */
62@media  screen and (max-width: 1366px) {
63    /* insert styles here */
64}
65 
66/* (1280x1024) SXGA Display */
67@media  screen and (max-width: 1280px) {
68    /* insert styles here */
69}
70 
71/* (1440x900) WXGA+ Display */
72@media  screen and (max-width: 1440px) {
73    /* insert styles here */
74}
75 
76/* (1680x1050) WSXGA+ Display */
77@media  screen and (max-width: 1680px) {
78    /* insert styles here */
79}
80 
81/* (1920x1080) Full HD Display */
82@media  screen and (max-width: 1920px) {
83    /* insert styles here */
84}
85 
86/* (1600x900) HD+ Display */
87@media  screen and (max-width: 1600px) {
88    /* insert styles here */
89}