หลักการสร้าง breakpoint ตัวอย่าง

หน้าก่อน รายการที่สามารถปิดได้
หน้าต่อไป HTML องค์ประกอบที่สามารถลากและปล่อยได้

เรียนรู้วิธีการใช้ media query สำหรับ breakpoint ตัวอย่างที่ตรงไปตรงมา

breakpoint ตัวอย่าง

มีหลายรายการหน้าจอและอุปกรณ์ที่มีความสูงและความกว้างต่างกันมาก ดังนั้น การสร้าง breakpoint ที่แน่นอนสำหรับแต่ละอุปกรณ์เป็นสิ่งที่ยาก

เพื่อระบบแบบง่าย คุณสามารถตำหน่องห้ากลุ่มที่ตรงไปตรงมา

ตัวอย่าง

/* อุปกรณ์ขนาดย่อย (เครื่องมือถือ) 600px และต่ำกว่า */
@media only screen and (max-width: 600px) {...}
/* อุปกรณ์ขนาดเล็ก (เครื่องตั้งโต๊ะแบบแนวตั้ง และเครื่องมือมือถือ) 600px และมากกว่า */
@media only screen and (min-width: 600px) {...}
/* อุปกรณ์ขนาดกลาง (เครื่องตั้งโต๊ะแบบแนวนอน) 768px และมากกว่า */
@media only screen and (min-width: 768px) {...}
/* อุปกรณ์ขนาดเล็ก (เครื่องคอมพิวเตอร์หนักและเครื่องตั้งโต๊ะ) 992px และมากกว่า */
@media only screen and (min-width: 992px) {...}
/* อุปกรณ์ขนาดใหญ่ (เครื่องคอมพิวเตอร์หนักและเครื่องตั้งโต๊ะ) 1200px และมากกว่า */
@media only screen and (min-width: 1200px) {...}

ทดลองด้วยตัวเอง