HTML <style> media प्रभाव

एचटीएमएल <style> टैग

वर्णन और उपयोग

media गुण का उपयोग शैली के लिए विशेष मीडिया/उपकरण (अच्छे तौर पर तैयार) को निर्धारित करने के लिए किया जाता है。

यह गुण शैली के लिए विशेष उपकरण (जैसे iPhone) वा वॉइस या प्रिंट मीडिया के लिए उपयुक्त है。

सूचना:यह गुण कई मानों को स्वीकार कर सकता है。

उदाहरण

उदाहरण 1

प्रिंट के लिए नियमित शैली निर्धारित करें:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

खुद आज्ञा करें

उदाहरण 2

media गुण के इस्तेमाल से दो समूह की शैली को अलग करें:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

खुद आज्ञा करें

टिप्पणी:ब्राउज़र विंडो चारों ओर 500 पिक्सल से कम चारों ओर जब इस्तेमाल किया जाता है तो पहले समूह की शैली का इस्तेमाल किया जाता है, विंडो चारों ओर 500 पिक्सल से अधिक चारों ओर जब इस्तेमाल किया जाता है तो दूसरे समूह की शैली का इस्तेमाल किया जाता है。

व्याकरण

<style media="value>

संभावित ऑपरेटर

ऑपरेटर वर्णन
and नियमित AND ऑपरेटर
not नियमित NOT ऑपरेटर
, नियमित OR ऑपरेटर

शैली के उपयोग की शर्तें बहुत ही बारीकी से डिजाइन की जा सकती हैं। पहले से जो विशेष उपकरण किस्म के लिए इसके लिए स्पष्टीकरण करना आवश्यक है। नीचे दी गई तालिका सभी नियमित मानों का समावेश करती है:

उपकरण

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

ब्राउज़र उपकरणों को वर्गीकृत करने के लिए जिम्मेदार है। कुछ उपकरण किस्में (जैसे screen और print) विभिन्न ब्राउज़रों पर वर्गीकरण बहुत ही एकसमान है, लेकिन कुछ अन्य उपकरण (जैसे handheld) के वर्गीकरण बहुत ही अनियमित हो सकता है। इसलिए इसके लिए पुष्टि करना बहुत आवश्यक है कि आपके लिए इसके लिए चुने गए ब्राउज़र विशेष उपकरण के वर्गीकरण से आपका वर्गीकरण समान है या नहीं।

विशेषता

विशेषता वर्णन
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

लक्ष्य डिस्प्ले / कागज के उपकरण चौड़ाई / ऊंचाई अनुपात को निर्धारित करता है。

"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)"
monochrome

सिंगल श्वेत फ्रेम बफ़र में प्रति पिक्सल के बिटों की संख्या को निर्धारित करता है。

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

उदाहरण: media="screen and (monochrome:2)"
resolution

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

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

उदाहरण: media="print and (resolution:300dpi)"
scan

टेलीविजन के स्कैन मोड को निर्धारित करता है。

समर्थित मूल्य: progressive और interlace。

इस विशेषता का कोई शब्द नहीं है。

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

निर्धारित आउटपुट डिवाइस ग्रिड है या बीटमैप है।

ग्रिड डिवाइस, जैसे अक्षर आधारित टर्मिनल और एक पंक्ति में दिखाई देने वाले सिग्नल यानी विन्स जैसे डिवाइसों, ने निर्धारित ग्रिड में सामग्री दिखाई देते हैं。

समर्थित मान 0 और 1 है (1 ग्रिड डिवाइस के लिए प्रतीक है)。

इस विशेषता का कोई शब्द नहीं है。

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

width जैसी विशेषताएँ आमतौर पर min और max शब्दों के साथ प्रयोग की जाती हैं।इन शब्दों को नहीं लगाने पर, साइल का उपयोग बहुत सूक्ष्म खिड़की आकार पर निर्भर करता है, लेकिन इन शब्दों को लगाने से शर्तों को और ज्यादा लचीला बना सकता है।

ऊपरी तालिका उपलब्ध विशेषताओं को सूचीबद्ध और सम्बोधित करती है।अगर विशेषता को विशेष रूप से नहीं कहा गया है, तो इसे min- और max- के साथ प्रयोग किया जा सकता है, जो निर्धारित मान के बजाय गणनात्मक मान बनाता है।

यह विशेषताएँ ब्राउज़र द्वारा व्याख्यान की जाती हैं।ब्राउज़र किन विशेषताओं को पहचानता है और जब उन विशेषताओं का उपयोग किया जा सकता है, उसका विवरण बहुत ही जटिल है।यदि यह विशेषताओं का उपयोग साइल स्टाइल करने के लिए करना है, तो पूर्ण परीक्षण करें और विशेषता नहीं होने वाली बदले में साइल करने के लिए तैयार हों।

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

च्रोम एज फायरफॉक्स सैफारी ओपेरा
च्रोम एज फायरफॉक्स सैफारी ओपेरा
सापोर्ट सापोर्ट सापोर्ट सापोर्ट सापोर्ट

एचटीएमएल <style> टैग