ฝึกทำให้การ์ดตอบสนอง

โจทย์

ทำส่วนการ์ดสินค้าหรือบทความให้ใช้ได้ทั้งมือถือและเดสก์ท็อป

สเปกที่ต้องครบ

• มี viewport meta

• สไตล์ฐานเป็นคอลัมน์เดียว (mobile-first)

• มีอย่างน้อยหนึ่ง @media (min-width: …) ที่เพิ่มคอลัมน์

• รูปในส่วนนั้นใช้ max-width: 100% และไม่ล้นจอ

• container หลักไม่ล็อก width เป็นพิกเซลตายตัวโดยไม่มี max

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

ทำตามสเปกด้านบนให้ครบ
เริ่มจาก 1fr แล้วค่อย repeat ที่ min-width
ปานกลาง
เพิ่ม breakpoint ที่สองเมื่อการ์ดเริ่มแน่นเกินไป
ปานกลาง
จงใจลบ viewport แล้วเปิดบน device mode — สังเกต แล้วใส่กลับ
ยาก