css tricks media queries

1/* ----------- iPhone 4 and 4S ----------- */
2
3/* Portrait and Landscape */
4@media only screen 
5  and (min-device-width: 320px) 
6  and (max-device-width: 480px)
7  and (-webkit-min-device-pixel-ratio: 2) {
8
9}
10
11/* Portrait */
12@media only screen 
13  and (min-device-width: 320px) 
14  and (max-device-width: 480px)
15  and (-webkit-min-device-pixel-ratio: 2)
16  and (orientation: portrait) {
17}
18
19/* Landscape */
20@media only screen 
21  and (min-device-width: 320px) 
22  and (max-device-width: 480px)
23  and (-webkit-min-device-pixel-ratio: 2)
24  and (orientation: landscape) {
25
26}
27
28/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
29
30/* Portrait and Landscape */
31@media only screen 
32  and (min-device-width: 320px) 
33  and (max-device-width: 568px)
34  and (-webkit-min-device-pixel-ratio: 2) {
35
36}
37
38/* Portrait */
39@media only screen 
40  and (min-device-width: 320px) 
41  and (max-device-width: 568px)
42  and (-webkit-min-device-pixel-ratio: 2)
43  and (orientation: portrait) {
44}
45
46/* Landscape */
47@media only screen 
48  and (min-device-width: 320px) 
49  and (max-device-width: 568px)
50  and (-webkit-min-device-pixel-ratio: 2)
51  and (orientation: landscape) {
52
53}
54
55/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
56
57/* Portrait and Landscape */
58@media only screen 
59  and (min-device-width: 375px) 
60  and (max-device-width: 667px) 
61  and (-webkit-min-device-pixel-ratio: 2) { 
62
63}
64
65/* Portrait */
66@media only screen 
67  and (min-device-width: 375px) 
68  and (max-device-width: 667px) 
69  and (-webkit-min-device-pixel-ratio: 2)
70  and (orientation: portrait) { 
71
72}
73
74/* Landscape */
75@media only screen 
76  and (min-device-width: 375px) 
77  and (max-device-width: 667px) 
78  and (-webkit-min-device-pixel-ratio: 2)
79  and (orientation: landscape) { 
80
81}
82
83/* ----------- iPhone 6+, 7+ and 8+ ----------- */
84
85/* Portrait and Landscape */
86@media only screen 
87  and (min-device-width: 414px) 
88  and (max-device-width: 736px) 
89  and (-webkit-min-device-pixel-ratio: 3) { 
90
91}
92
93/* Portrait */
94@media only screen 
95  and (min-device-width: 414px) 
96  and (max-device-width: 736px) 
97  and (-webkit-min-device-pixel-ratio: 3)
98  and (orientation: portrait) { 
99
100}
101
102/* Landscape */
103@media only screen 
104  and (min-device-width: 414px) 
105  and (max-device-width: 736px) 
106  and (-webkit-min-device-pixel-ratio: 3)
107  and (orientation: landscape) { 
108
109}
110
111/* ----------- iPhone X ----------- */
112
113/* Portrait and Landscape */
114@media only screen 
115  and (min-device-width: 375px) 
116  and (max-device-width: 812px) 
117  and (-webkit-min-device-pixel-ratio: 3) { 
118
119}
120
121/* Portrait */
122@media only screen 
123  and (min-device-width: 375px) 
124  and (max-device-width: 812px) 
125  and (-webkit-min-device-pixel-ratio: 3)
126  and (orientation: portrait) { 
127
128}
129
130/* Landscape */
131@media only screen 
132  and (min-device-width: 375px) 
133  and (max-device-width: 812px) 
134  and (-webkit-min-device-pixel-ratio: 3)
135  and (orientation: landscape) { 
136
137}

1@media (min-width: 600px) and (max-width: 800px) {
2
3/* your css code here  */
4
5/* html { background: red; } */
6
7
8}

1@media (max-width: 767px)   {
2
3      .container{width:100%} *{color:green;}-Mobile
4
5    }
6
7
8    @media (min-width: 768px)  {
9
10     .container{width:100%} *{color:pink  } -Desktop
11
12    }
13    @media (min-width: 768px) and (orientation:portrait)  {
14
15       .container{width:100%} *{color:yellow  } -Mobile
16
17    }
18    @media (min-width: 1024px)  {
19
20       .container{width:100%} *{color:pink  } -Desktop
21
22    }
23    @media (min-width: 1200px)  {
24
25    .container{width:1180px} *{color:pink   } -Desktop
26
27    }
28