मीडिया क्वेरीज़ मोबाइल, डेस्कटॉप आदि जैसे विभिन्न आकार के डिवाइसेज़ के लिए अलग-अलग स्टाइल नियमों की एक CSS तकनीक है।
मीडिया क्वेरीज़ और रिस्पॉन्सिव वेब डिज़ाइन को 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>Media queries example</h1> <h2>Resize the screen to see background color change on different breakpoints</h2> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
