มาทำความรู้จัก Media Queries เมื่อโลกปัจจุบันอะไรก็ใช้อินเตอร์เน็ตได้

สวัสดีครับพี่น้องชาว ThaiCSS โลกปัจจุบันที่ก้าวหน้าพัฒนาไปอย่างรวดเร็ว บวกกับการให้บริการอินเตอร์เน็ตความเร็วสูงก็ได้มีการพัฒนาอย่างต่อเนื่องต่างจากสมัยที่เริ่มใช้อินเตอร์เน็ต 56K โคตรๆ นั่นทำให้ เราๆ ท่านๆ ได้เข้าถึงข้อมูลข่าวสารได้อย่างรวดเร็วและทั่วถึง ทำให้เหล่าผู้ผลิตรวมถึงนักพัฒนา พร้อมใจกันพัฒนาซอร์ฟแวร์และอุปกรณ์ต่างๆ ให้สามารถใช้งานอินเตอร์เน็ตได้ ขนาดโทรศัพท์กากๆ ของผมยังสามารถเข้าเว็บได้ (มี WIFI ด้วยบักพร งงมาก) หรือแม้แต่ทีวีของพร เองก็ใช้อินเตอร์เน็ตได้ (ผมก็งงใช้ได้ไงวะ) นั่นหมายความว่าปัจจุบันมี Device มากมายที่สามารถใช้งานอินเตอร์เน็ตได้ ซึ่งต้องมีคุณสมบัติที่แตกต่างกันออกไป เช่น ความกว้างความสูง ความละเอียดหน้าจอ และอื่นๆ อีกมากมาย

เข้าเรื่องกันเลยพล่ามมาเยอะมากฮ่าๆ วันนี้ผมจะมาแนะนำเรื่องของการใช้งาน 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 อื่นๆ ลองทดสอบแล้วเอามาบอกหน่อยนะครับว่ามันโอเครึปล่าว

บทความนี้อาจจะจะค่อนข้าง Advance ในการอ่านและทำความเข้าใจก่อนจะเขียนผมก็ได้เงื้อง่ามาหลายทีว่าจะเขียนดีมั้ย ด้วยความที่ไม่ใช่คนอธิบายเล่าเรื่องที่เก่ง และบางคำที่ ผมไม่แน่ใจว่าจะใช้ศัพท์อย่างไรให้เข้าใจง่าย ยังไงซะของต้องขออภัยไว้ก่อนนะครับและจะพยายามปรับปรุงให้ดีขึ้น ขอบคุณครับ