Breakpoints คืออะไร?
ในการออกแบบเว็บไซต์ Responsive Web Design นั้นจะมีขนาดหน้าจอที่แสดงผล 3 ประเภท ด้วยกันเช่น Desktop, Tablet, Mobile แต่การออกแบบเว็บให้ปรับเปลี่ยนขนาดได้ตามอุปกรณ์ที่แสดงผลนั้น หากมีมือถือตัว Top หลายยี่ห้อ เราก็คงต้องไปหาข้อมูลว่าขนาดหน้าจอเท่าไหร่ หรือแม้แต่ลูกค้าของเราใช้มือถืออะไร ถ้าทำแบบนี้คงปวดหัวตายแน่ๆ กับการกำหนด Breakpoints จำนวนมาก เพื่อให้เว็บของเราแสดงผลในอุปกรณ์นั้นได้ดีที่สุด
สาระสำคัญของการสร้าง Breakpoints ไม่ได้อยู่ที่ขนาดหน้าจอของ Devide ที่เปิดแสดงผล ยกตัวอย่างเช่น มีน้ำ 1 แก้ว หากเราเปลี่ยนขนาดแก้ว น้ำก็จะเปลี่ยนรูปทรงตามแก้วที่อยู่ แต่ถ้าเรานำน้ำไปฟรีชให้แข็ง เมื่อเราเทใส่แก้ที่ต่างกันน้ำแข็งก็จะไม่สามารถแนบชิดขอบแก้วได้ จะเห็นได้ว่าเราไม่จำเป็นต้องนำน้ำ ฟรีชให้แข็งในแก้วทุกขนาด เราแค่ต้องหากำหนดขนาดแก้วที่เทน้ำไปแล้ว น้ำนั้นไม่ล้นแก้ว ไม่ว่าจะแก้วขนาดใดก็ตาม
แล้วจะกำหนเ Break Points อย่างไร
หลักการออกแบบเว็บเราเน้นไปที่ Content เป็นหลักอยู่แล้ว เพราะคนสนใจเนื้อหา รูป ดังนั้นเนื้อหาเว็บ รูป ข้อความ ของเรามากคืดตัวกำหนด Break Points ให้เราไปเซตขนาด Devices ที่เว็บเราแสดงผลได้ดีที่สุด ที่เราต้องการไว้ 3- 4 ขนาด
Elementor Custom Break Points
สำหรับใครที่ใช้ Elementor Pro จะมีเมนูให้สามารถเซต หรือเพิ่ม Break Points ได้ เพื่อให้ Content เราสามารถแสดงผลได้สวยงาม
