Media Query ใช้ทำ เว็บไซต์ Responsive
เป็นความสามารถหนึ่งของ CSS3 โดย กำหนดขนาดหน้าจอของ Device หรือ อุปกรณ์แสดงผล ใช้ คำสั่ง Media Query
โดยเขียนCSSปกติ แต่เ ทำการ “ครอบ” ชุดคำสั่ง CSS ด้วย “ความกว้าง” ของหน้าจอ อีกทีนึง

หลักการของคำสั่งตัวนี้ คือ เอาหน้าจอของอุปกรณ์มากำหนด

การเขียน css ทั่วไป ไม่ว่าเปิดด้วยอุกรณ์ใด ข้อความที่อยู่ในจะแสดงเป็นสีแดง
p{color:red;}

การเขียน Responsive สำหรับขนาดหน้าจอ 480px
@media screen and (max-width : 480px){
/** เขียน CSS แบบปกติทั่วไปตรงนี้ได้เลย */
}

เห็นไหมง่ายมาก

ก็จะกลายเป็น

@media screen and (max-width : 480px){
p{
color:pink; /*อักษรสีชมพู */
}
}

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

การทำ Breakpoint คือ หาจุดที่เว็บเริ่มเละแล้วเขียนโค้ดใหม่
จุดที่เราควรจะเขียนกำหนดการแสดงผลใหม่ อาจใช้ Extension ของ Google Chrome ที่ชื่อว่า Windows Resizer ช่วยในการหาความกว้างของหน้าจอ

โดยทั่วไป ความกว้างสำหรับหน้าจอมือถือ และ Tabblet เป็นแบบนี้
มือถือ
@media screen and (max-width : 480px){ ….. }

Tabblet
@media screen and (max-width : 768px){ …. }

ความกว้างแบบคอมพิวเตอร์ทั่วไป เราเขียนแบบปกติได้เลย ไม่ต้องเอาความกว้างมาครอบ
เดี๋ยวนี้มี framework สำหรับทำเว็บ Responsive ให้เราใช้งานกันเยอะมาก ช่วยประหยัดเวลาการทำงานได้เยอะ เช่น Boostrap, Foundation Zurb เราไม่ต้องมานั่งเขียน CSS ใหม่ทุกอย่าง เพียงแค่เขียนเพิ่มอะไรที่มันยังไม่มีเข้าแค่นั้นเอง

การเขียนแยกไฟล์

ทั่วไป เราจะเรียกใช้ styles.css
ถ้าหากหน้าต่างแสดงผลของ Web Browser มีขนาดไม่เกิน 480px เราจะเรียก tablet.css เพิ่มเข้ามาอีกตัว

ถ้าต้องการให้หน้าเว็บ โหลด Javascript เฉพาะตัวที่ใช้งานกับ Device นั้นๆ จะทำอย่างไร?

ตัวอย่างเช่น เรามี Javascript สำหรับทำ Chat Room อยู่ แต่เราไม่ต้องการให้ผู้ใช้งานที่ใช้มือถือ หรือหน้าจอขนาดเล็กๆ ต้องมาโหลด Javascript ตัวนี้ เพื่อการแสดงผลที่รวดเร็วกว่า เราสามารถแก้ปัญหานี้ได้โดยใช้ API ของ Javascript ที่มีชื่อว่า window.matchMedia

วิธีใช้งานนั้นง่ายมากครับ เพราะเราสามารถใช้การเขียนเคสต่างๆ เหมือนที่ใช้กับ Media Queries ใน css3 ได้เลยครับ

https://www.youtube.com/watch?v=mgIISr2qiwM
https://www.youtube.com/watch?v=xUIjEOfKdtA