मीडिया-डिपेंडेंट स्टाइलशीट्स बेसिक स्टाइलशीट्स ही होती हैं लेकिन ये HTML डॉक्यूमेंट पर तभी लागू होती हैं जब मीडिया टाइप उस डिवाइस टाइप से मेल खाता है जिस पर डॉक्यूमेंट विज़िबल है।
हम निम्नलिखित मेथड्स से मीडिया-डिपेंडेंट स्टाइलशीट्स बना सकते हैं:
- @media At-rules का उपयोग करके
- @import At-rules का उपयोग करके
- मीडिया एट्रिब्यूट के साथ HTML <link> एलिमेंट का उपयोग करके
उदाहरण
आइए मीडिया-डिपेंडेंट स्टाइलशीट्स बनाने का एक उदाहरण देखते हैं:
HTML डॉक्यूमेंट
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>CSS डॉक्यूमेंट (screen.css)
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }CSS डॉक्यूमेंट (print.css)
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid #dc3545; box-shadow: 22px 12px 3px 3px #dc3545; position: absolute; left: 30%; top: 20px; }आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब डॉक्यूमेंट स्क्रीन मीडिया टाइप में विज़िबल है -
जब डॉक्यूमेंट प्रिंट मीडिया टाइप में विज़िबल है -
उदाहरण
आइए मीडिया-डिपेंडेंट स्टाइलशीट्स बनाने का एक और उदाहरण देखते हैं:
<!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/android/images/android.jpg"); color: #c303c3; } } @media screen and (max-width: 500px) { p { color: black; background: url("https://www.tutorialspoint.com/react_native/images/react-native.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. </p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा:
जब स्क्रीन साइज़ 500px से ऊपर है -
जब स्क्रीन साइज़ 500px से नीचे है -
