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