Window matchMedia() ວິທະຍານ

ການກຳນົດ ແລະ ການນໍາໃຊ້

matchMedia() ວິທະຍານກຳນົດຄືນມາມີວັດຖຸ MediaQueryList ທີ່ມີຜົນການກວດສອບ:

ອີງຕາມ:

ວັດຖຸ MediaQueryList

matchMedia()

matchMedia() ວິທະຍານສະຖານະການສາມາດເປັນປະເພດສະຖານະການສະຫຼາດ @media CSS ທັງໝົດ ເຊັ່ນ 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 ປະກອກມິຕິກັນ
}

ທົດລອງດີຕະຫຼອດ

ຕົວຢ່າງການກ່າວ

ຕົວຢ່າງນີ້ການເຮັດວຽກກັບການກວດສອບສະຖານະການຂອງປ່ອງວາງປ່ຽງປ່າວັດຖຸ ແລະທຽບກັບສະຖານະການປ່ອງວາງປ່ຽງປ່າວັດຖຸປະຈຸບັນ:

ສຳລັບການເຮັດວຽກກັບການກວດສອບສະຖານະການຂອງປ່ອງວາງປ່ຽງປ່າວັດຖຸ ກະຈາຍຕົວອອກການກວດສອບໃຫ້ວັດຖຸ MediaQueryList (ບັນຈຸຫຼັກໃນລາວ):

ຕົວຢ່າງ 2

ຖ້າຄວາມກວ້າງຂອງສະໝອງຫຼາຍກວ່າຫຼືບໍ່ຫຼາຍກວ່າ 500 ປະກອບຕາມມິຕິກັນ ກະຈາຍສີສີນົມ ບໍ່ຫຼາຍກວ່າ 500 ປະກອກມິຕິກັນ ກະຈາຍສີສີນົມ:

// ການສ້າງຕົວອອກການກວດສອບ
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // ການສ້າງວັດຖຸ MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)")
// ການເອິ້ນຕົວອອກການກວດສອບ match ໃນເວລາການເປີດໂຕ:
myFunction(mmObj);
// ການເພີ່ມຕົວອອກການກວດສອບ match ທີ່ເປັນຜູ້ຟັງການປ່ຽນແປງສະຖານະການ:
mmObj.addListener(myFunction);

ທົດລອງດີຕະຫຼອດ

ວິທະຍານ

window.matchMedia("mediaQuery)

ປະເພດ

ປະເພດ ການອະທິບາຍ
mediaQuery ສຳຄັນ. ການອະທິບາຍຄຳສັບສຳລັບການຊອກຫາສະເພາະ.

ການຄົບຖານ

ປະເພດ ການອະທິບາຍ
ວັດຖຸ ວັດຖຸ MediaQueryList ທີ່ມີຜົນຂອງການຊອກຫາສຳລັບການນຳໃຊ້ສະເພາະ.

ການສະໜັບສະໜູນບັນດາກະບີ່

ທຸກກະບີ່ໄດ້ສະໜັບສະໜູນ matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ 11 ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ