အခြေအနေ မျိုးစား အရ JavaScript ကို အသုံးပြုခြင်း

JavaScript ကို အခြေအနေ မျိုးစား အရ

အခြေအနေ မျိုးစား အရ အခြေအနေ အရ

window.matchMedia() စနစ် ကျမ်းကို ပြန်လည်ပေးသော MediaQueryList အရာ ကို ပြန်လည်ပေးသည်။matchMedia() စနစ်၏ အဆင့် အမှတ် အရ CSS @media အခြေအနေ အမျိုးအစား အရ အခြေအနေ အရ min-height、min-width、လှည့်ချင်း တို့ဖြစ်သည်

အကျိုးသတ္တုအမျိုး

လျှပ်ပေါ်အခြေအနေ အရ သတ္တုပိုင်း အတွက် အမှတ်အသား ပြောင်းလဲပါ၊ သတ္တုပိုင်း အရ သတ္တုပိုင်း အတွက် အမှတ်အသား ပြောင်းလဲပါ:

function myFunction(x) {
  if (x.matches) { // အခြေအနေများ မျိုးစားများ ကို စစ်ဆေးပါ
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// MediaQueryList အရာကို ဖန်တီးပါ
var x = window.matchMedia("(max-width: 700px)");
// လုပ်ဆောင်နေစဉ် ခရစ်စ်အုပ်ချုပ်သင်္ချာကို ခေါ်ဆိုပါ
myFunction(x);
// အခြေအနေ ပြောင်းလဲဖြစ်ပြီးနောက် ခရစ်စ်အုပ်ချုပ်သင်္ချာကို ပြင်ဆင်ပါ
x.addEventListener("change", function() {
  myFunction(x);
});

ကိုယ်တိုင် စစ်ဆေးကြည့်ပါ

ပတ်သက်သော စာမျက်နှာ

ပါးစားသင်္ချာ：CSS 媒体查询

ပါးစားသင်္ချာ：အပြန်အလုပ်ဖြိုးစားသော ဝတ္ထုကြောင်းပန်းချုပ်ခြင်း

လုပ်သီုးချက်စာအုပ်：JavaScript window.matchMedia() စနစ်