JavaScript MediaQueryList API

ขอบเขต MediaQueryList

ขอบเขต MediaQueryList วิธีที่อุปกรณ์ที่เก็บข้อมูลจากการสอบถามสื่อ

ขอบเขต MediaQueryList วิธีวิธีขอบเขตของเรื่อง

ขอบเขต MediaQueryList วิธีเข้าถึง

window.matchMedia() หรือ matchMedia()

ตัวอย่าง

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

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

ดูเพิ่มเติม

วิธี window.matchMedia()

ขอบเขต MediaQueryList

ขอบเขต การอธิบาย
matches ค่าเป็นค่าเลขเล็ก ในกรณีที่เอกสารตรงกับคำถาม trueหรือ false
media ค่าข้อความ สื่อความหมาย (ลิสต์)

วิธี MediaQueryList

วิธี การอธิบาย
addListener() เพิ่มฟังก์ชันตรวจสอบใหม่ ซึ่งจะทำงานเมื่อผลประเมินของการสอบถามสื่อเปลี่ยนแปลง
removeListener()

ลบตัวตรวจสอบที่เพิ่มเข้ามาก่อนหน้านี้จากรายชื่อตัวตรวจสอบ

ถ้าตัวตรวจสอบไม่มีในรายชื่อ จะไม่มีการปฏิบัติการใดๆ

การสอบถามสื่อ

matchMedia() การสอบถามสื่อ กฎ @media CSS คุณสมบัติสื่อของใดๆ อย่างเช่น min-height หรือ min-width หรือ orientation และอื่นๆ

ตัวอย่าง

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

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

ประเภทสื่อ

ค่า การอธิบาย
all โดยมาตราฐาน
print ใช้สำหรับเครื่องปริ้น
screen ใช้สำหรับหน้าจอคอมพิวเตอร์ ตั้งโต๊ะ มือถือ โทรศัพท์สมาร์ทโฟน และอื่นๆ
speech เครื่องอ่านหน้าเว็บที่ใช้เพื่ออ่านหน้าเว็บด้วยเสียง

คุณสมบัติสื่อ

ค่า การอธิบาย
any-hover มีกลวิธีนำเข้าที่สามารถอนุญาตให้ผู้ใช้นำหมุนเมาส์บนองค์ประกอบหรือไม่?
（เพิ่มใน Media Queries Level 4）
any-pointer มีกลวิธีนำเข้าที่สามารถใช้ได้หรือไม่ และถ้ามี ความเหมาะสมของมันอย่างไร?
（เพิ่มใน Media Queries Level 4）
aspect-ratio อัตราส่วนกว้างสูงของมุมมอง
color จำนวนที่แสดงที่มีต่อส่วนประกอบสีของอุปกรณ์ออก
color-gamut ระยะวางสีที่สนับสนุนโดยตัวตัวแทนผู้ใช้และอุปกรณ์ออก
（เพิ่มใน Media Queries Level 4）
color-index 设备可以显示的颜色数量。
grid 设备是网格还是位图。
height

（เพิ่มใน Media Queries Level 4）
inverted-colors เครื่องมือเลือกหรือระบบปฏิบัติการภายใต้มีการเปลี่ยนสีตรงหรือไม่?
（เพิ่มใน Media Queries Level 4）
light-level ระดับของแสงสว่างของสภาพแวดล้อมปัจจุบัน (เพิ่มใน Media Queries Level 4)
max-aspect-ratio สัดส่วนของความกว้างสูงของพื้นที่แสดงที่มากที่สุด
max-color จำนวนบิตของสีในอุปกรณ์ออกที่มากที่สุด
max-color-index จำนวนสีที่อุปกรณ์สามารถแสดงที่มากที่สุด
max-height ความสูงของพื้นที่แสดงที่มากที่สุด ตัวอย่างเช่นหน้าต่างบราวเซอร์
max-monochrome จำนวนบิตของ
max-resolution ความคลarityของอุปกรณ์ที่มากที่สุด ใช้ dpi หรือ dpcm
max-width ความกว้างของพื้นที่แสดงที่มากที่สุด ตัวอย่างเช่นหน้าต่างบราวเซอร์
min-aspect-ratio สัดส่วนของความกว้างสูงของพื้นที่แสดงที่น้อยที่สุด
min-color จำนวนบิตของสีในอุปกรณ์ออกที่น้อยที่สุด
min-color-index จำนวนสีที่อุปกรณ์สามารถแสดงที่น้อยที่สุด
min-height ความสูงของพื้นที่แสดงที่น้อยที่สุด ตัวอย่างเช่นหน้าต่างบราวเซอร์
min-monochrome จำนวนบิตของ
min-resolution ความคลarityของอุปกรณ์ที่น้อยที่สุด ใช้ dpi หรือ dpcm
min-width ความกว้างของพื้นที่แสดงที่น้อยที่สุด ตัวอย่างเช่นหน้าต่างบราวเซอร์
monochrome จำนวนบิตของ
orientation ทิศทางของมุมมอง (โมดูลของนอร์ทเทิร์นหรือโมดูลของโมดูลแบบตรง)
overflow-block วิธีที่อุปกรณ์ออกจะจัดการกับสารบรรณที่ลอยออกนอกกว้างของมุมมองบล็อค (เพิ่มใน Media Queries Level 4)
overflow-inline ความสามารถของการหมุนสารบรรณในสัดส่วนที่ลอยออกนอกกว้างของมุมมอง (เพิ่มใน Media Queries Level 4)
pointer หลักประกอบของการเข้าถึงคืออุปกรณ์แสดงหรือไม่? ถ้าเป็นแล้ว ความเหมาะสมของมันเท่าไหร่?
（เพิ่มใน Media Queries Level 4）
resolution การแสดงความคลarityของอุปกรณ์ออกความคลarityด้วย dpi หรือ dpcm
scan สแกนกระบวนการออกอุปกรณ์
scripting เป็นไปได้ที่จะใช้สคริปต์ (เช่น JavaScript) หรือไม่ (เพิ่มใน Media Queries Level 4)
update อุปกรณ์ออกที่สามารถปรับเปลี่ยนรูปแบบของสิ่งที่มีความเกี่ยวข้องได้เร็วแค่ไหน (เพิ่มใน Media Queries Level 4)
width ความกว้างของ viewport。