วันนี้ผมจะมาแนะนำเรื่องของการใช้งาน CSS เรื่องของ Media Queries นะครับ แล้วคืออะไรล่ะ Media Queries มันคือตัวช่วยตรวจสอบคุณสมบัติของ Device ที่ใช้ในการเข้าเว็บไซต์ของเรา เพื่อที่ว่าเราจะได้ออกแบบและกำหนดรูปแบบการแสดงผลของเว็บไซต์เราให้เมาะกับ Device นั้นๆ
จะใช้งาน 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) { … }
ตัวอย่างการใช้งาน Media Queries
**เราสามารถใช้ prefix “min” และ “max” ในการระบุค่าลงไปนะครับ และค่าทุกค่าต้องเป็นจำนวนจริงไม่มีติดลบครับ เช่น “max-width: -700px” แบบนี้ไม่ได้นะครับ
***ตัวอย่างการเขียนนี้ผมใช้แค่คำสั่งของการตรวจความกว้าง และเน้นการแสดงกับหน้าจอ เท่านั้นนะครับ โดยสามารถลองย่อและขยาย browser เพื่อดูความแตกต่างของการแสดงผล ยังไม่ได้เอาโนเกียร์น้อยๆ ของผมใช้งาน หรือถ้าใครมี Device อื่นๆ ลองทดสอบแล้วเอามาบอกหน่อยนะครับว่ามันโอเครึปล่าว
รับทําเว็บไซต์ 
แลกลิงค์ 
