ວິທີການສະແດງສະເພາະພາສາ JavaScript

ການສະແດງສະເພາະພາສາ JavaScript

ສະແດງສະເພາະສະແດງສະເພາະຂອງ CSS3 ແມ່ນປະກອບສະຖານະສຳຄັນໜຶ່ງຂອງການອອກແບບເວັບໄຊພິສຖິລະ. ສະແດງສະເພາະສະແດງສະເພາະສະແດງວັດສະດຸຂອງຫົວໜ້າແລະວັດສະດຸຂອງຫົວໜ້າເພື່ອອະທິບາຍເວັບໄຊທີ່ຈະສະແດງດີໃນທຸກເຄື່ອງມືທຸກຂະແໜງ (ຄອມພິວເຕິ້, ເຄື່ອງບິນ, ເຄື່ອງຫຼິ້ນ, ເຄື່ອງຫຼິ້ນສາຍບາດ, ເຮັດວຽກຢູ່ທະວີບ, ແລະອີກຫຼາຍ).

window.matchMedia() ພາສາຍອິດສະຫຼະກອນສາຍບາດສະແດງວ່າ ວັດຖຸ MediaQueryList ທີ່ສະແດງຄວາມຜົນຂອງສະແດງສະເພາະ CSS.matchMedia() ຄູ່ມວັດສະດຸສານສະແດງສະເພາະຂອງພາສາຍອິດສະຫຼະກອນສາຍບາດຫຼືສະແດງສະເພາະສາຍບາດ. CSS @media ການຕັດສິນລະອຽດສານສະແດງສະເພາະ min-height、min-width、ການຄອບຄົວ ອີກ.

ຄວາມນິຍົມ

ຖ້າວັດສະດຸຂອງຫົວໜ້າທີ່ຕໍ່າຫຼາຍຫຼືບໍ່ຫຼາຍກວ່າ 700 ຕີ່ມີວັດສະດຸສີເຫຼືອ. ຖ້າວັດສະດຸຫຼາຍກວ່າ 700 ຕີ່ມີວັດສະດຸສີສີບປອນ:

function myFunction(x) {
  if (x.matches) { // If media query 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()