└── style.css


/style.css:
--------------------------------------------------------------------------------
 1 | /* For Desktop View */
 2 | @media screen and (min-width: 1024px) {
 3 |     .gfg-div {
 4 |         background-color: #63c971;
 5 |         color: #fff;
 6 |     }
 7 | }
 8 | 
 9 | /* For Tablet View */
10 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
11 |     .gfg-div {
12 |         width: 400px;
13 |         height: 400px;
14 |         background-color: orange;
15 |         color: black;
16 |     }
17 | }
18 | 
19 | /* For Mobile Portrait View */
20 | @media screen and (max-device-width: 480px) and (orientation: portrait) {
21 |     .gfg-div {
22 |         width: 200px;
23 |         height: 200px;
24 |         background-color: red;
25 |         color: #fff;
26 |     }
27 | }
28 | 
29 | /* For Mobile Landscape View */
30 | @media screen and (max-device-width: 640px) and (orientation: landscape) {
31 |     .gfg-div {
32 |         width: 400px;
33 |         height: 200px;
34 |         background-color: cyan;
35 |         color: black;
36 |     }
37 | }
38 | 
39 | /* For Mobile Phones Portrait or Landscape View */
40 | @media screen and (max-device-width: 640px) {
41 |     .gfg-div {
42 |         width: 400px;
43 |         height: 200px;
44 |         background-color: chartreuse;
45 |         color: black;
46 |     }
47 | }
48 | 
49 | /* For iPhone 4 Portrait or Landscape View */
50 | @media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
51 |     .gfg-div {
52 |         width: 400px;
53 |         height: 400px;
54 |         background-color: brown;
55 |         color: black;
56 |     }
57 | }
58 | 
59 | /* For iPhone 5 Portrait or Landscape View */
60 | @media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
61 |     .gfg-div {
62 |         width: 400px;
63 |         height: 400px;
64 |         background-color: cornflowerblue;
65 |         color: black;
66 |     }
67 | }
68 | 
69 | /* For iPhone 6 and 6 plus Portrait or Landscape View */
70 | @media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
71 |     .gfg-div {
72 |         width: 400px;
73 |         height: 400px;
74 |         background-color: darkgoldenrod;
75 |         color: black;
76 |     }
77 | }


--------------------------------------------------------------------------------