उदाहरण
CSS का उपयोग करके सामान्य डिवाइस ब्रेकपॉइंट के लिए मीडिया क्वेरी का उपयोग करने के लिए, निम्न कोड देखें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: white; } @media only screen and (max-width: 600px) { body { background: rgb(207, 60, 151); } } @media only screen and (min-width: 600px) { body { background: rgb(0, 128, 107); } } @media only screen and (min-width: 768px) { body { background: rgb(226, 136, 18); } } @media only screen and (min-width: 992px) { body { background: rgb(108, 25, 185); } } @media only screen and (min-width: 1200px) { body { background: rgb(13, 124, 63); } } </style> </head> <body> <h1>Typical Breakpoints Example</h1> <h2> Resize the screen to see background color change on different breakpoints </h2> </body> </html>
आउटपुट
1200px से बड़े स्क्रीन आकार पर निम्न आउटपुट होगा:
0 से 600px के बीच की स्क्रीन पर निम्न आउटपुट दिखाया जाएगा:
