CSS మీడియా క్వరీ

CSS2 లో మీడియా రకాలు ప్రవేశపెట్టబడింది

CSS2 లో ప్రవేశపెట్టబడింది అంశం రుల్స్, ఇది వివిధ మీడియా రకాలకు వివిధ స్టైల్ రుల్స్ నిర్వచించడానికి సాధ్యము చేస్తుంది.

ఉదాహరణకు: మీరు కంప్యూటర్ స్క్రీన్ కోసం స్టైల్ రుల్స్ ఒక జంట, ప్రింటర్ కోసం ఒక జంట, హ్యాండ్ హోల్డ్ డివైస్ కోసం ఒక జంట, టెలివిజన్ కోసం ఒక జంట మరియు ఇలాంటి ఇతర రకాలు.

不幸的是，除了打印媒体类型之外，这些媒体类型从未得到过设备的大规模支持。

CSS3 引入了媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的概念：它们并不查找设备类型，而是关注设备的能力。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式）
  • 分辨率

రిజల్యూషన్

మీడియా క్వరీస్ ఉపయోగించడం ఒక ప్రసిద్ధ టెక్నిక్ ఉంది, ఇది డెస్క్టాప్లు, లాప్టాప్లు, టాబులెట్లు మరియు స్మార్ట్ఫోన్లు (ఉదాహరణకు iPhone మరియు ఆండ్రాయిడ్ స్మార్ట్ఫోన్లు) కు అనుకూలమైన స్టైల్స్ షేట్లను అందిస్తుంది.

బ్రౌజర్ మద్దతు అంశం పట్టికలో నమోదైన సంఖ్యలు పూర్తిగా మద్దతు ఉన్న బ్రౌజర్స్ ను సూచిస్తాయి

పరిణామం మొదటి బ్రౌజర్ వెర్షన్
అంశం @media 4.0 21.0 3.5 4.0

9.0

మీడియా క్వరీస్ సంకేతాలు

మీడియా క్వరీస్ ఒక మీడియా రకాన్ని కలిగివుంటుంది, మరియు ఒకటి లేదా అంతకంటే ఎక్కువ వ్యక్తిగత ప్రకటనలను కలిగివుంటుంది ఇవి true లేదా false గా పరిశీలించబడవచ్చు. mediatype @media not|onlyexpressionsand (
  ) {CSS-Code
}

;

మీరు not లేదా only ఆపరేటర్స్ ఉపయోగించకపోతే మీడియా రకం విహంగమంగా ఉంటుంది మరియు అది దాని స్వభావంగా ఉంటుంది కాబట్టి కనిపించదు ఉంటుంది. all రకం

వివిధ మీడియాలకు వివిధ స్టైల్స్ షేట్లను ఉపయోగించవచ్చు:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" హెచ్చరించండి="print.css">

CSS3 మీడియా రకం

విలువ వివరణ
all అన్ని మీడియా టైప్ పరికరాలకు ఉపయోగిస్తారు。
print ప్రింటర్స్ కొరకు ఉపయోగిస్తారు。
screen కంప్యూటర్ స్క్రీన్, టాబులెట్, స్మార్ట్ఫోన్ మొదలైన వివిధ పరికరాలకు ఉపయోగిస్తారు。
speech పేజీని పెద్దగా చదివించే స్క్రీన్ రీడర్స్ కొరకు ఉపయోగిస్తారు。

మీడియా క్వరీస్ సాధారణ ఉదాహరణ

మీడియా క్వరీస్ ఒక విధంగా స్టైల్స్ షేట్లో ఒక ప్రత్యామ్నాయ సిఎస్ఎస్ భాగాన్ని కలిగివుంటుంది。

దిగువ ఉదాహరణలో విండో వెడల్పు 480 పిక్సెల్స్ లేదా అంతకంటే ఎక్కువ అయితే బ్యాక్‌గ్రౌండ్ కలర్ ను లైట్ గ్రీన్ చేస్తారు (విండో వెడల్పు 480 పిక్సెల్స్ కంటే తక్కువ అయితే బ్యాక్‌గ్రౌండ్ కలర్ పింక్ అవుతుంది):

ప్రామాణికం

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

亲自试一试

దిగువ ఉదాహరణలో ఒక మెనూ ప్రదర్శించబడింది, విండో వెడల్పు 480 పిక్సెల్స్ లేదా అంతకంటే ఎక్కువ అయితే ఆ మెనూ పేజీ యొక్క ఎడమ పక్కకు ఫ్లోటింగ్ అవుతుంది (విండో వెడల్పు 480 పిక్సెల్స్ కంటే తక్కువ అయితే ఆ మెనూ కంటెంట్ పైన ఉంటుంది):

ప్రామాణికం

@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}

亲自试一试

更多媒体查询实例

如需更多媒体查询的实例，请访问下一页：CSS MQ 实例.

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请查看我们的 CSS పరిచయంలో @media రూల్.