मीडिया पर निर्भर स्टाइलशीट केवल मूल स्टाइलशीट हैं, लेकिन केवल HTML दस्तावेज़ पर लागू होती हैं, जब मीडियाटाइप डिवाइस प्रकार से मेल खाता है जिस पर दस्तावेज़ दिखाई देता है।
हम निम्नलिखित तरीकों से मीडिया पर निर्भर स्टाइलशीट बना सकते हैं -
- @media At-नियमों का उपयोग करना
- @import At-नियमों का उपयोग करना
- मीडिया विशेषता के साथ 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>
सीएसएस दस्तावेज़ (स्क्रीन.सीएसएस)
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 से कम हो -
