CSS @media नियम का उपयोग एक ही स्टाइल शीट में विभिन्न मीडिया टाइप्स (जैसे print, screen, all, आदि) के लिए अलग-अलग स्टाइल्स स्पेसिफाई करने के लिए किया जाता है। यह आमतौर पर मीडिया टाइप्स की कॉमा-सेपरेटेड लिस्ट और CSS डिक्लेरेशन ब्लॉक द्वारा फॉलो किया जाता है जिसमें टारगेट मीडिया के लिए स्टाइल नियम होते हैं।
सिंटैक्स
निम्नलिखित सिंटैक्स है:
@media not | only mediatype and (expressions) { CSS-Code; }उदाहरण
आइए CSS @media नियम का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .col { float: left; width: 20%; padding: 40px; } body { background-color: lemonchiffon; margin: 20px; } @media screen and (max-width: 850px) { .col { width: 50%; } body { background-color: mediumseagreen; } } @media screen and (max-width: 550px) { .col { width: 100%; } body { background-color: powderblue; } } </style> </head> <body> <div class="row"> <div class="col" style="background-color:#373;"> </div> <div class="col" style="background-color:#363;"> </div> <div class="col" style="background-color:#353;"> </div> <div class="col" style="background-color:#343;"> </div> <div class="col" style="background-color:#333;"> </div> </div> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब स्क्रीन साइज़ 850px से ऊपर है -
जब स्क्रीन साइज़ 550px और 850px के बीच है -
जब स्क्रीन साइज़ 550px से नीचे है -
उदाहरण
आइए CSS @media नियम का एक और उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style type="text/css"> p { background-origin: content-box; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 3px black; padding: 20px; background-origin: border-box; } @media screen and (max-width: 900px) { p{ background: url("https://www.tutorialspoint.com/swing/images/swing.jpg"); color: #c303c3; } } @media screen and (max-width: 500px) { p { color: black; background: url("https://www.tutorialspoint.com/cplusplus/images/cplusplus.jpg"); } } </style> </head> <body> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब स्क्रीन साइज़ 500px से ऊपर है -
जब स्क्रीन साइज़ 500px से नीचे है -
