แผนฝึกบทที่ 12
แบบฝึกปฏิบัติ
ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้
ตรวจ/เพิ่ม viewport meta ในทุกหน้าของโปรเจกต์ฝึก
เปลี่ยนกริดการ์ดเป็น 1 → 2 → 3 คอลัมน์ด้วย min-width สองจุด
ใส่กฎ img { max-width:100%; height:auto; } แล้วทดสอบรูปใหญ่
เปลี่ยน container จาก width คงที่เป็น max-width + width 100%
หาจุดพังด้วยการลากขอบหน้าต่าง แล้วใส่ breakpoint ตรงนั้น
ทดสอบใน device toolbar อย่างน้อย 3 ความกว้างแล้วจดสิ่งที่ยังต้องแก้