css media queries ejemplos

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/* (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}