responsive media queries for all devices

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

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

1// Best Practice suggests
2// keep default style for smallest screen size (portrait mobile, below 576px)
3// and then proceed in assending order with media query like below
4
5// Small devices (landscape phones, 576px and above till next break point)
6@media (min-width: 576px) { ... }
7
8// Medium devices (tablets, 768px and above till next break point)
9@media (min-width: 768px) { ... }
10
11// Large devices (desktops, 992px and above till next break point)
12@media (min-width: 992px) { ... }
13
14// so on ...
15

1320px
2480px
3600px
4768px
5900px
61024px
71200px

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}