విండో మ్యాచ్ మీడియా క్వరీ మాథ్యడ్

నిర్వచనం మరియు ఉపయోగం

matchMedia() మాథ్యడ్ ప్రతిస్పందించింది మీడియా క్వరీ లిస్ట్ తో కలిగిన క్వరీ ఫలితాలు ఉన్న మాథ్యడ్ కలిగిన మీడియా క్వరీ లిస్ట్ ఉంది.

మరియు ఇతర పఠనాలు:

MediaQueryList ఆబ్జెక్ట్

మీడియా క్వరీ

matchMedia() మాథ్యడ్ మీడియా క్వరీలు CSS @media రూల్స్ యొక్క ఏ మీడియా అంశాలను కూడా ఉంటాయి, ఉదాహరణకు min-height, min-width, orientation మొదలైనవి.

ఉదాహరణ

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

ఉదాహరణ

ఉదాహరణ 1

స్క్రీన్/వీక్షణం వెడల్పు మరియు 700 పిక్సెల్స్ కంటే ఎక్కువ ఉంటే ఉంది కాదు కానీ సమానంగా ఉంటే ఉంది కాదు:

if (window.matchMedia("(max-width: 700px)").matches) {
  // వీక్షణం వెడల్పు 700 పిక్సెల్స్ కంటే తక్కువ లేక సమానంగా ఉంటే
}
  // వీక్షణం వెడల్పు మరియు 700 పిక్సెల్స్ కంటే ఎక్కువ
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ వివరణ

ఈ ఉదాహరణ మీడియా క్వరీని నడుపుము మరియు ప్రస్తుత విండో స్థితిని పోల్చుము.

విండో స్థితి మార్పులపై స్పందకాత్మక మీడియా క్వరీలను నడుపుము అయితే ఇవి మీడియా క్వరీ లిస్ట్ ఆబ్జెక్ట్కు ఇవి జరిగింది (కింది "ఇతర ఉదాహరణలు" చూడండి):

ఉదాహరణ 2

వీక్షణం వెడల్పు 500 పిక్సెల్స్ కంటే తక్కువ లేక సమానంగా ఉంటే బ్యాక్గ్రౌండ్ కలర్ పస్తులు, మరియు మరియు ఇతరంగా పస్తులు చేయండి:

// మీడియా క్వరీ ఫంక్షన్ సృష్టించండి
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // మీడియా క్వరీ లిస్ట్ ఆబ్జెక్ట్ సృష్టించండి
const mmObj = window.matchMedia("(max-width: 700px)");
// నడుము సమయంలో match ఫంక్షన్ నడుపుము:
myFunction(mmObj);
// స్థితి మార్పులపై match ఫంక్షన్ నివ్వండి:
mmObj.addListener(myFunction);

స్వయంగా ప్రయోగించండి

సంకేతాలు

window.matchMedia("mediaQuery)

పారామీటర్స్

పారామీటర్స్ వివరణ
mediaQuery అవసరం. మీడియా క్వరీ వచ్చే స్ట్రింగ్.

రాబట్టు

రకం వివరణ
ఆబ్జెక్ట్ మీడియా క్వరీ ఫలితాలతో కూడినటువంటి MediaQueryList ఆబ్జెక్ట్

బ్రౌజర్ మద్దతు

అన్ని బ్రౌజర్లు మద్దతు ఇస్తాయి matchMedia()మీదట

చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
చ్రోమ్ ఐఇ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఒపెరా
మద్దతు 11 మద్దతు మద్దతు మద్దతు మద్దతు