วิธีการใช้ JavaScript สำหรับเมเดียควิวี่

หน้าก่อน HTML องค์ประกอบที่สามารถย้ายได้
下一页语法高亮器

ใช้ JavaScript สำหรับเมเดียควิวี่

เมเดียควิวี่ ถูกนำเสนอใน CSS3 และเป็นหนึ่งในองค์ประกอบสำคัญของการออกแบบเว็บไซต์ที่เหมาะกับอุปกรณ์ทั้งหมด มีที่ใช้เพื่อกำหนดความกว้างและความสูงของวิว เพื่อที่เว็บไซต์จะแสดงดีทุกอุปกรณ์ (คอมพิวเตอร์เดสก์ตอป ลาพโทป ตั้งโต๊ะ มือถือ และอื่น ๆ)

window.matchMedia() วิธีการนี้กลับค่า MediaQueryList แปลงแปลงที่แสดงผลของความค้นหา CSS มีเดียควิวี่matchMedia() ค่าของวิธีการสามารถเป็น CSS @media มีคุณสมบัติเมเดียควิวี่ ตามกฎระเบียบ อย่างเช่น min-height、min-width、ทิศทาง และอื่น ๆ

ตัวอย่าง

ถ้าความกว้างของวิวอัตราไอโฟนเป็น 700 พิกเซล หรือน้อยกว่า ให้เปลี่ยนสีพื้นหลังเป็นสีเหลือง ถ้ามากกว่า 700 พิกเซล ให้เปลี่ยนเป็นสีชมพู:

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);
});

ทดลองด้วยตัวเอง