Window matchMedia()
ဥပမာ ၁
စခရင်/မြင်ကွင်းပို့တ်သည် 700 pixels ထက် ကျယ်နေပါသလား။
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
matchMedia()
နည်းလမ်းသည် မေးမြန်းမှုမှရလဒ်များနှင့်အတူ MediaQueryList ကို ပြန်ပေး သည် ။
ကိုလည်းကြည့်ပါ-
မီဒီယာမေးခွန်းများ
matchMedia()
နည်းလမ်း
၏ မီဒီယာမေးမြန်းချက်များသည် CSS @media စည်းမျဉ်း ၏ မီဒီယာအင်္ဂါရပ်များဖြစ်သည့် မိုင်း အမြင့်၊ မိနစ်အကျယ်၊ လမ်းညွှန်မှုစသည်ဖြင့် ဖြစ်နိုင်သည်။
ဥပမာများ
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
အထားအသို
window.matchMedia(mediaQuery)
ကန့်သတ်ချက်များ
Parameter | Description |
mediaQuery | Required. A string representing a media query. |
တန်ဖိုးကို ပြန်ပေးသည်။
ရိုက်ပါ။ | ဖော်ပြချက် |
အရာဝတ္ထုတစ်ခု | မီဒီယာမေးမြန်းမှု၏ရလဒ်များနှင့်အတူ MediaQueryList အရာဝတ္ထု။ |
ဥပမာများဖြင့် ရှင်းပြထားပါသည်။
ဤစာမျက်နှာရှိ ပထမဆုံးဥပမာသည် မီဒီယာမေးမြန်းချက်တစ်ခုကို လုပ်ဆောင်ပြီး ၎င်းကို လက်ရှိ ဝင်းဒိုးအခြေအနေနှင့် နှိုင်းယှဉ်ပါသည်။
ဝင်းဒိုးအခြေအနေ ပြောင်းလဲ သည့်အခါတိုင်း တုံ့ပြန်မှုရှိသော မီဒီယာမေးခွန်းကို လုပ်ဆောင်ရန် ၊ MediaQueryList အရာဝတ္တုသို့ အဖြစ်အပျက်နားဆင်သူကို ထည့်ပါ (အောက်ပါ "နောက်ထပ် ဥပမာများ" ကိုကြည့်ပါ-
နောက်ထပ် ဥပမာများ
မြင်ကွင်းပို့တ်သည် 500 pixels ပိုနည်းသည် သို့မဟုတ် ညီမျှပါက၊ နောက်ခံအရောင်ကို အဝါရောင်၊ မဟုတ်ပါက ပန်းရောင်အဖြစ် သတ်မှတ်ပါ-
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Browser ပံ့ပိုးမှု
matchMedia()
ခေတ်မီဘရောက်ဆာများအားလုံးတွင် ပံ့ပိုးထားသည်။
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 11 | Yes | Yes | Yes | Yes |