จะใช้งาน Media Queries ได้อย่างไร

การใช้งาน Media Queries เหมือนกับการใช้งาน CSS ทั่วไป แต่เนื่องจากปัจจุบันมี Device มากมายและมีคุณสมบัติแตกต่างกันออกไปอย่างที่เรารู้กัน จึงจะต้องมีข้อกำหนดต่างๆ ขึ้นมาเพื่อที่จะได้แสดงผล ถูกต้อง และเหมาะสมกับ Device ที่ใช้ในการเข้าถึงเว็บไซต์ของเรา

• ต้องระบุคุณสมบัติของ Device ที่เราต้องการแสดงผลตามที่เรากำหนด
• หลังจากการระบุแล้วว่าต้องการให้เว็บแสดงผลกับ Device ชนิดได้ เราสามารถใช้คำสั่ง “and” เพื่อระบุรายละเอียดอื่นๆ ให้เจาะจงลงไปอีกเพื่อให้แสดงผลถูกต้องตามที่เรากำหนด
• และคุณสมบัติต่างๆ ที่ถูกระบุลงไปจะต้องจะต้องมีค่าเสมอ เพราะถ้าเราปล่อยว่างไว้จะเกิดการแสดงผลที่ผิดพลาด

คำสั่งต่างๆ ที่ใช้งานร่วมกับ Media Queries

width** ใช้ตรวจสอบความกว้างของพื้นที่แสดงผล โดยวัดจากความกว้างของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความกว้างของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

height** ใช้ตรวจสอบความสูงของพื้นที่แสดงผล โดยวัดจากความสูงของพื้นที่ ที่ใช้แสดงผลเว็บไซต์ เช่น ความสูงของ Browser โดยจะวัดรวมเอาพื้นที่ของ Scrollbar ด้วย (ถ้ามี)

ตัวอย่างการเขียนตรวจสอบ width และ height

<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />

@media screen and (min-width: 400px) and (max-width: 700px) { … }

device-width** ใช้ตรวจสอบความกว้างของอุปกรณ์แสดงผลทั้งหมด โดยวัดจากความกว้างของจออุปกรณ์ ที่ใช้แสดงผลเว็บไซต์ เช่น ถ้าจอแสดงผลอยู่ที่ 640 x 960 ก็จะวัดเอาความกว้างคือ 640px

device-height** ใช้ตรวจสอบความสูงของชอุปกรณ์แสดงผลทั้งหมด โดยวัดจากความสูงของจออุปกรณ์ ที่ใช้แสดงผลเว็บไซต์ เช่น ถ้าจอแสดงผลอยู่ที่ 640 x 960 ก็จะวัดเอาความสูงคือ 960px

ตัวอย่างการเขียนตรวจสอบ device-width และ device-height

<link rel="stylesheet" media="screen and (device-height: 600px)" />

@media screen and (device-width: 800px) { … }

orientation ใช้ตรวจสอบการหมุนของจอว่าอยู่ในแนวตั้ง หรือ แนวนอน โดยคำสั่งนี้จะทำงานกับ ภาพ Bitmap เท่านั้น

ตัวอย่างการเขียนตรวจสอบ orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio** ใช้ตรวจสอบสัดส่วน ของ ภาพ Bitmap ที่แสดงผลบนหน้าจอเท่านั้น

device-aspect-ratio** ใช้ตรวจสอบสัดส่วนการแสดงผล ของอุปกรณ์ว่า ขณะนี้จอนั้นแสดงผล ภาพ Bitmap อยู่ที่เท่าไหร่ เช่น 4:3, 16:9, 1280:720 เป็นต้น

ตัวอย่างการเขียนตรวจสอบ aspect-ratio และ device-aspect-ratio

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

color** ใช้ตรวจสอบ การแสดงสีของอุปรณ์นั้นๆ (Bits per Pixel) หากเป็นอุปกรณ์ ที่ไม่ได้แสดงผลเป็นสี ค่าจะกลายเป็น 0

monochrome** ใช้ตรวจสอบอุปกรณ์ขาวดำ (Bits per Pixel) หากเป็นอุปกรณ์ที่แสดงผลแบบสี ค่าจะกลายเป็น 0

ตัวอย่างการเขียนตรวจสอบ color และ monochrome

@media all and (color) { … }
@media all and (min-color: 1) { … }
@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }

<link rel="stylesheet" media="print and (color)" href="http://…" />  
<link rel="stylesheet" media="print and (monochrome)" href="http://…" />

resolution** ใช้ตรวจสอบความระเอียดของ ภาพ Bitmap ที่แสดงบนอุปกรณ์นั้นๆ

ตัวอย่างการเขียนตรวจสอบ color และ monochrome

@media print and (min-resolution: 300dpi) { … }