วิธีการ - แบบสอบถามสื่อด้วย JavaScript
ตัวอย่าง
หากวิวพอร์ตกว้างน้อยกว่าหรือเท่ากับ 700 พิกเซล ให้เปลี่ยนสีพื้นหลังเป็นสีเหลือง หากมากกว่า 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
การสืบค้นสื่อถูกนำมาใช้ใน CSS3 และเป็นหนึ่งในองค์ประกอบหลักสำหรับการออกแบบเว็บที่ตอบสนอง คิวรี่สื่อใช้เพื่อกำหนดความกว้างและความสูงของวิวพอร์ตเพื่อทำให้หน้าเว็บดูดีบนอุปกรณ์ทั้งหมด (เดสก์ท็อป แล็ปท็อป แท็บเล็ต โทรศัพท์ ฯลฯ)
window.matchMedia ()วิธีการส่งกลับวัตถุ MediaQueryList ที่แสดงผลลัพธ์ของสตริงแบบสอบถามสื่อ CSS ที่ระบุ ค่าของเมธอด matchMedia() สามารถเป็นคุณลักษณะสื่อใดๆ ของกฎ CSS @mediaเช่น ความสูงต่ำสุด ความกว้างต่ำสุด การวางแนว ฯลฯ
เรียนรู้เพิ่มเติมเกี่ยวกับการสืบค้นสื่อใน บทช่วย สอนCSS Media Queries ของเรา
เรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบที่ตอบสนองได้ใน บทช่วย สอนการออกแบบเว็บที่ตอบสนอง ของเรา
เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการwindow.matchMedia()ในข้อมูลอ้างอิง JavaScript ของเรา