การทำ responsive คือการให้ขนาดของภาพที่แสดงไหลไปตามขนาดหน้าจอ ที่เห็นว่าภาพจริงใหญ่กว่าภาพที่แสดง หมายความว่า หน้าจอที่แสดงนั้นเล็กกว่าภาพที่ใช้ เพื่อป้องกันไม่ให้ภาพที่แสดงออกมาแตกและเล็กกว่าขนาดหน้าจอ
ซึ่งเป็นวิธีที่ขี้เกียจ การทำ responsive ที่ดีต้องควรแบ่งภาพออกเป็นระยะประเภทของจอ เช่น ภาพมือถือ ภาพแท็บเล็ท ภาพโน็ตบุค ภาพพีซี แล้วใช้การเขียนโค๊ดเพื่อให้บราวเซอร์ดึงภาพตามระยะที่ใช้งานมาแสดง โดยวิธีอาจจะทำได้หลายแบบ ลองๆดูเรื่องคีย์ Resolution switching Image ครับ
แต่การทำภาพหลายขนาดมันก็จะต้องขยันหน่อยถ้าจะทำแบบใช้หลายรูป อีกวิธีคือการใช้ php Resize Display ก่อนแสดงผลก็น่าจะง่ายกว่าแต่ไม่รู้ว่าดีในเรื่องการประมวลผลไหมนะ
อีกวิธีที่ดีคือภาพแบบ SVG image ทำให้การแสดงผลแต่ละครั้งบรว์เซอร์ก็จะคำนวณใหม่ทุกครั้ง
สรุป การทำ Responsive จริงๆมันใช้เวลาและต้นทุนเพิ่ม หลายๆคนเลยเน้นเอาภาพเดียวมาแสดงผลในทุกๆขนาด ซึ่งเป็นวิธีที่ไม่ผิดแต่ไม่ดี... เราควรใช้รูปให้เหมาะสมกับขนาดหน้าจอเพื่อให้ตัวเครื่องที่แสดงผลไม่กินทรัพยากรเกินความจำเป็น บางเว็บแสดงหน้ามือถือยังจะใส่ bg ใหญ่ๆมาให้โหลดช้าไปอีกทั้งๆที่ก็เห็ฯ bg ด้านขอบๆเพียงไม่กี่ px เราควร display:none พวก bg ไปเลยเวลาแสดงผลกับมือถือหรือแท็บเลท แล้วหันมาใช้โค๊ดสีง่ายๆสั้นๆในการเพิ่มสีสัน
ส่วนตอบกระทู้คือ เพราะเจ้าของเว็บไม่รู้เรื่องการออกแบบเว็บ และคนทำเว็บให้ก็ขี้เกียจเพิ่มงานตัวเองครับ....เพราะงานเพิ่ม.เงินไม่เพิ่ม
ความรู้ทั่วไป
