พื้นฐานการทำเว็บแบบ Responsive
Responsive design คือการทำเว็บให้โค๊ดเพียงชุดเดียว สามารถใช้ได้กับจอหลายๆ ขนาด เช่นจอคอมพิวเตอร์ จอแท็บเล็ต หรือจอโน๊ตบุค ซึ่งการทำเว็บแบบ responsive นั้น มักจะใช้สำหรับแก้ปัญหาการทำเว็บเวอร์ชันมือถือ ที่มักจะมีฟีเจอร์เป็นรองเว็บหลักอยู่เสมอๆ เนื่องจากเว็บ responsive นั้น ฟีเจอร์ต่างๆ บนเว็บจะยังอยู่ “ค่อนข้างครบ” แต่จะถูกจัดเรียงใหม่ให้เหมาะสมกับขนาดจอนั่นเอง ต่างจากการทำเว็บเวอร์ชันมือถือแยก ที่ฟีเจอร์ต่างๆ มักจะตามมาไม่ครบนั่นเองครับ
Media Query หัวใจสำคัญของ Responsive
สิ่งแรกที่ผู้อ่านควรจะรู้จัก นั่นคือ media query ใน CSS เพราะมันถือเป็นหัวใจสำคัญของ responsive เลยทีเดียว ซึ่งเจ้า media query นี้ จะช่วยให้เราตรวจสอบเกี่ยวกับการแสดงผลของอุปกรณ์ที่เปิดเว็บเราอยู่ได้ครับ เช่นตรวจสอบความกว้าง ความสูง ตรวจสอบการเอียงเครื่อง (แนวตั้งหรือแนวนอน) ตรวจสอบอัตราส่วนจอภาพ ตรวจสอบจำนวนสี หรือใช้ตรวจสอบมุมมองสำหรับพิมพ์ก็ได้เช่นกัน