สิ่งที่ต้องทำเพื่อให้เว็บของเราเป็นแบบ Responsive

1. กำหนด Viewport เพื่อบังคับให้บราวเซอร์ไม่ต้องทำการย่อ-ขยายหน้าเว็บ โดยกำหนดไว้ภายใน tag head ตรงส่วนของ meta ต่างๆนั่นแหละครับ
   <meta name="viewport" content="width=device-width; initial-scale=1.0">
2. ตรวจสอบและจัดการแสดงผลของบราวเซอร์ให้เหมาะสมกับขนาดหน้าจอหรืออุปกรณ์ที่ใช้งานอยู่ โดยมีวิธีต่างๆดังนี้
   1. ตรวจสอบชนิดของ Browser ด้วย PHP และทำการสร้างโค้ดสำหรับ Browser นั้นๆ ด้วยการตรวจสอบจาก $_SERVER['HTTP_USER_AGENT'] ครับ วิธีนี้ไม่ได้เป็น Responsive นะครับเนื่องจาก Script จะทำการสร้างโค้ดที่เหมาะสมสำหรับ Browser ซึ่งอาจแตกต่างกันในแต่ละแบบ
   2. ตรวจสอบขนาดหน้าจอด้วย Javascript วิธีนี้ก็เป็นวิธียอดนิยมวิธีหนึ่ง ด้วยการใช้ Javascript ในการตรวจสอบขนาดของหน้าจอ และทำการแก้ไข layout ด้วย Javascript เพื่อให้มีขนาดเหมาะสมกับหน้าจอโดยอัตโนมัติ วิธีนี้มีข้อดีคือ มันสามารถรองรับการทำงานบนบราวเซอร์รุ่นเก่าๆได้ด้วย (ที่ไม่รองรับ CSS3 เช่น IE8 หรือต่ำกว่า) และยังสามารถใส่ลูกเล่นที่หวือหวาในขณะที่กำลังปรับปรุง Layout ได้ด้วย เช่น สามารถทำให้ Layout ค่อยๆเปลี่ยนขนาดหรือตำแหน่งได้
   3. ใช้ CSS3 และ HTML5 ผมใช้วิธีนี้เป็นหลักครับ เนื่องจาก HTML5 และ CSS3 ถูกออกแบบมาเพื่องานนี้โดยเฉพาะ โดยที่เหตุผลหลักของการใช้ HTML5 และ CSS3 ก็คือเพื่อลดการใช้งาน Javascript ที่ไม่จำเป็นลงอยู่แล้ว โดยที่บทความชุดนี้ผมจะนำเสนอเรื่องนี้เพียงอย่างเดียวครับ

Media Queries พระเอกของงานนี้

CSS3 สนับสนุน media ทั้งหมดเช่นเดียวกับ CSS2.1 ครับเช่น print, screen และ handle เป็นต้น โดยที่บน CSS3 ได้มีการเพิ่มเติมคำสั่งในการตรวจสอบหน้าจอเพิ่มเติมมาด้วย เช่น max-width, device-width, orientation และ color เป็นต้น ซึ่งเราสามารถใช้คำสั่งเพิ่มเติมเหล่านี้ในการตรวจสอบขนาดหน้าจอของอุปกรณ์ที่กำลังแสดงผลและปรับขนาดเว็บให้เมาะสมได้ด้วย

<link rel=stylesheet media="screen and (max-device-width: 480px)" href="mobile.css">

ตัวอย่างด้านบน จะเป็นการเรียกใช้ mobile.css เมื่ออุปกรณ์มีขนาดหน้าจอไม่เกิน 480px เป็นการเลือกไฟล์ CSS มาใช้งานตามขนาดของหน้าจอครับ

/* เขียน CSS สำหรับอุปกรณ์ที่ไม่รองรับ CSS3 หรือ Media Queries ที่นี่ */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   /* เขียน CSS สำหรับหน้าจอขนาดไม่เกิน 320px ถึง 480px ที่นี่ */
}

@media only screen and (max-width : 320px) {
   /* เขียน CSS สำหรับหน้าจอขนาดไม่เกิน 320px ที่นี่ */
}

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