HTML <source> media అంశం
నిర్వచనం మరియు వినియోగం
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 | ప్రొజెక్షన్ మెషీన్. |
| ప్రింట్ ప్రివ్యూ మోడ్/ప్రింట్ పేజీ. | |
| 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)" |
| రెజల్యూషన్ |
లక్ష్య శ్రేణి / పత్రం పిక్సెల్ గాను లేదా 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 |
