HTML <source> मीडिया विशेषता

HTML <source> टैग

परिभाषा और उपयोग

media विशेषता को CSS में परिभाषित किए जाने वाले किसी भी वैध मीडिया क्वेरी स्वीकार करती है。

ध्यान देंःयह विशेषता कई मूल्य ले सकती है。

उदाहरण

एक दो स्रोत फाइलों और एक बैकअप इमेज सहित <picture> एलिमेंटः

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

अपने आप सामने परीक्षण करें

व्याकरण

<source media="media_query>

संभव ऑपरेटर

ऑपरेटर वर्णन
and AND ऑपरेटर को निर्धारित करता है。
not NOT ऑपरेटर को निर्धारित करता है。
, OR ऑपरेटर को निर्धारित करता है。

डिवाइस

मूल्य वर्णन
all डिफ़ॉल्ट. सभी डिवाइसों के लिए उपयुक्त。
aural आड़ा संगीतकार。
braille ब्रेल फ़ीडबैक उपकरण。
handheld हैंडहेल्ड डिवाइस (छोटे स्क्रीन, सीमित बैंडविड्थ)。
projection प्रोजेक्शन मशीन。
print प्रिंट पूर्वावलोकन मोड/प्रिंट पृष्ठ。
screen कंप्यूटर स्क्रीन。
tty टेलीटाइपर और एकसमान चारित्रक ग्रिड का उपयोग करने वाले समान माध्यम。
tv टीवी टाइप डिवाइस (कम रेजोल्यूशन, सीमित पेजिंग क्षमता)。

मूल्य

मूल्य वर्णन
width

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले क्षेत्र की चौड़ाई。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (min-width:500px)"
height

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले क्षेत्र की ऊंचाई。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (max-height:700px)"
device-width

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले/कागज की चौड़ाई。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (device-width:500px)"
device-height

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले/कागज की ऊंचाई。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (device-height:500px)"
orientation

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले/कागज का दिशा。

संभव मूल्य: "portrait" या "landscape"

उदाहरण: media="all and (orientation: landscape)"
aspect-ratio

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले क्षेत्र के रूपांतरण विस्तार/ऊंचाई अनुपात。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले/कागज का device-width/device-height अनुपात。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (aspect-ratio:16/9)"
color

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले के प्रत्येक रंग का बिट की संख्या。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (color:3)"
color-index

मूल्य निर्धारित करता है कि लक्ष्य दिस्प्ले कितने रंगों को संभाल सकता है。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (min-color-index:256)"
मोनोक्रॉम

सिंगल श्याम फ्रेम बफ़र में प्रति पिक्सल बिट का प्रतिपादन करता है。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="screen and (monochrome:2)"
रेजोल्यूशन

लक्ष्य डिस्प्ले / पेपर के पिक्सल घनत्व (dpi या dpcm) का प्रतिपादन करता है。

min- और max- अग्रसर का उपयोग किया जा सकता है。

उदाहरण: media="print and (resolution:300dpi)"
स्कैन

टीवी स्क्रीन के स्कैनिंग विधि का प्रतिपादन करता है。

संभाव्य मान: "progressive" और "interlace"。

उदाहरण: media="tv and (scan:interlace)"
ग्रिड

आउटपुट उपकरण को ग्रिड या बीटमैप होने का प्रतिपादन करता है。

संभाव्य मान: "1" ग्रिड के लिए, "0" अन्य के लिए。

उदाहरण: media="handheld and (grid:1)"

ब्राउज़र समर्थन

तालिका में नम्बर के द्वारा इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण निर्दिष्ट किया गया है。

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
38.0 9.0 15.0 9.1 25.0

HTML <source> टैग