หลังจากที่ผมได้พูดถึง Media Queries ไปแล้ว เรื่องต่อไปที่น่าสนใจคือการกำหนด Breakpoints ครับ คำว่า Breakpoints อาจฟังดูไม่คุ้นหูเท่าไร แต่เชื่อว่าหลายๆ คน ที่เคยทำ Responsive Web Design คงเคยใช้ โดยที่ไม่รู้ว่าสิ่งที่ตัวเองทำอยู่นั้น คือการกำหนด Breakpoints ซึ่งบทความนี้ ผมจะมาเล่าว่า Breakpoints คืออะไร มีความสำคัญกับ Responsive Web Design อย่างไร รวมไปถึงวิธีการกำหนด Breakpoints ครับ Breakpoints คืออะไร? Breakpoints คือ การที่ Responsive Web เปลี่ยนรูปแบบการแสดงผล เมื่อ viewport มีความกว้างถึงจุดๆ หนึ่ง ยกตัวอย่างเช่น เมื่อ viewport มีความกว้าง 320px(iPhone) ให้แสดงผล 1 คอลัมน์นะ ถ้า viewport มีความกว้างเพิ่มเป็น 768px(Tablet) ให้แสดงผล 2 คอลัมน์นะ และถ้าหาก viewport มีความกว้างถึง 1024px(Desktop) ให้แสดงโฆษณานะ เป็นต้น จากตัวอย่างนี้ จะได้ว่า เว็บนี้มี 3 Breakpoints คือ 320px 768px และ 1024px เริ่มลงมือกำหนด Breakpoints! แน่นอนว่าเราอยากให้เว็บไซต์ของเรา ดูดีในอุปกรณ์หลักๆ ไม่ว่าจะเป็น Mobile Phone, Tablet, Desktop, Widescreen Desktop เป็นต้น ซึ่งเราสามารถใช้ Media Queries ...
Comments
Post a Comment