Resposive Design#

• ใน Tailwind สำหรับการทำ responsive website โดยทั่วไปจะมีการกำหนดขนาดของจอคอมพิวเตอร์เป็น Brakepoint โดยจะแบ่งเป็น 5 ขนาด เช่น sm,md,lg,xl,2xl
• โดยที่แต่ละ Brakepoint จะใช้ CSS Class @media (min-width: <...>px) { ... }
• ใช้ min-width เป็นหลัก ดังนั้นในการใช้งานเราจะคิดจาก ขนาดจอเล็ก ไป ขนาดจอที่ใหญ่ ขึ้น

แล้วแต่ละ Breakpoint ใหญ่แค่ไหนกันนะ ?#

• sm (640px) : จอโทรศัพท์มือถือส่วนใหญ่ 📱
• md (768px) : จอ Ipad แนวตั้ง 📟
• lg (1024px) : จอไอแพดแนวนอนขึ้นไป และจอคอมพิวเตอร์ส่วนใหญ่ 💻
• xl (1280px) : จอคอมพิวเตอร์ขนาดใหญ่ 🖥
• 2xl (1536px) : จอคอมพิวเตอร์ขนาดใหญ่มาก 🥽🖥🎥