လုပ်နည်း - JavaScript ဖြင့် မီဒီယာမေးခွန်းများ
ဥပမာ
မြင်ကွင်းပို့တ်သည် 700 pixels ထက်နည်းသော သို့မဟုတ် ညီမျှပါက၊ နောက်ခံအရောင်ကို အဝါရောင်ပြောင်းပါ။ 700 ထက်ပိုပါက ပန်းရောင်ပြောင်းပါ။
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
JavaScript ဖြင့် Media Queries ကိုအသုံးပြုခြင်း။
မီဒီယာမေးခွန်းများကို CSS3 တွင် မိတ်ဆက်ခဲ့ပြီး တုံ့ပြန်မှုရှိသော ဝဘ်ဒီဇိုင်းအတွက် အဓိကပါဝင်ပစ္စည်းများထဲမှ တစ်ခုဖြစ်သည်။ ဝဘ်စာမျက်နှာများကို စက်အားလုံး (ဒက်စတော့များ၊ လက်ပ်တော့များ၊ တက်ဘလက်များ၊ ဖုန်းများ စသည်ဖြင့်) ကြည့်ကောင်းစေရန်အတွက် မီဒီယာမေးမြန်းချက်များကို အသုံးပြုပါသည်။
window.matchMedia () နည်းလမ်းသည် သတ်မှတ်ထားသော CSS မီဒီယာမေးမြန်းမှုစာကြောင်း၏ ရလဒ်များကို ကိုယ်စားပြုသည့် MediaQueryList အရာဝတ္ထုကို ပြန်ပေးသည်။ matchMedia() နည်းလမ်း၏တန်ဖိုးသည် CSS @media rule ၏ မီဒီယာအင်္ဂါရပ်များဖြစ်သည့် min-height, min-width, orientation အစရှိသည်တို့ကဲ့သို့ ဖြစ်နိုင်ပါသည်။
ကျွန်ုပ်တို့၏ CSS Media Queries Tutorial တွင် မီဒီယာမေးမြန်းချက်များအကြောင်း ပိုမိုလေ့လာပါ။
ကျွန်ုပ်တို့၏ Responsive Web Design Tutorial တွင် တုံ့ပြန်မှုဒီဇိုင်းအကြောင်း ပိုမိုလေ့လာပါ။
ကျွန်ုပ်တို့၏ JavaScript ရည်ညွှန်းချက်ရှိ window.matchMedia() နည်းလမ်း အကြောင်း ပိုမိုလေ့လာပါ ။