เว็บไซต์ Responsive คือเว็บไซต์ที่ดูดีและน่าทึ่งบนอุปกรณ์ทุกชนิด คือ เดสก์ท็อป แท็บเล็ต และโทรศัพท์มือถือ เว็บไซต์ควรมีการออกแบบ responsive เพื่อทำให้ตอบสนองได้ มันเกี่ยวกับการเล่นกับ HTML และ CSS สำหรับการเปลี่ยนขนาด ซ่อน หรือขยายหน้าจอ
มาดูตัวอย่างและความหมายของ responsive ขณะปรับขนาดเว็บไซต์:
Desktop
การออกแบบเว็บไซต์บน Desktop:
Tablet
การออกแบบเว็บไซต์บนแท็บเล็ต คุณสามารถเปรียบเทียบการเปลี่ยนแปลงกับภาพเดสก์ท็อปด้านบน:
Mobile
การออกแบบเว็บไซต์บนมือถือ:
เพื่อพัฒนาเว็บไซต์ responsive ที่ดูดีไม่ว่าขนาดอุปกรณ์ คุณต้องทำงานกับแนวคิดต่อไปนี้:
Viewport
Viewport ใช้ควบคุมเลย์เอาต์บนเบราว์เซอร์มือถือ ใช้ภายในแท็ก <meta> เพื่อให้เบราว์เซอร์ได้รับคำแนะนำเกี่ยวกับวิธีควบคุมมิติและการปรับขนาดของเพจเว็บ
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ที่นี่:
width=device-width ตั้งค่าความกว้างของหน้าเพื่อให้ตามความกว้างหน้าจอของอุปกรณ์ initial-scale=1.0 ตั้งค่าระดับซูมเริ่มต้น ช่วยเมื่อหน้าโหลดครั้งแรกโดยเบราว์เซอร์เว็บ
Media Queries
ด้วย Media queries ให้เพิ่ม breakpoint ที่ส่วนของการออกแบบบางส่วนทำงานต่างกันบนแต่ละด้านของ breakpoint
คุณสมบัติ width และ height ของรูปภาพ
สำหรับรูปภาพที่จะ responsive คุณต้องตั้งค่า width เป็น 100% และ height เป็น auto
