Responsive User Interface Design
ใช้ Grid Design
การใช้ Column จะต้องอยู่ภายใน CSS Class Row
หากมีการใช้งานระบบ Grid Row-Column จะต้องวาง column ให้อยู่ภายใต้ row เสมอ
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-6 col-xl-5">
...
</div>
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-6 col-xl-5">
...
</div>
</div>
จะต้องกำหนด Breakpoint ให้กับทุก Device
จะต้องมีการกำหนด CSS Class breakpoint สำหรับทุก Device ตั้งแต่ xs, sm, md, lg และ xl ตัวอย่างเช่น
มีการใช้ Layout เป็น 1 Column ไม่ต้องใส่ Row-Column
ในกรณีที่มี 1 Column ให้ใช้ Display block หรือ flex ได้เลย หากต้องการให้เนื้อหาเรียงในแนวนอนให้ใช้ flex-row และหากต้องการเรียงในแนวตั้งให้ใช้ flex-column
การเว้นระยะระหว่าง Object ภายใน Container หากใช้ display flex
เพื่อที่จะเว้นระยะห่างเท่าๆกัน สามารถใช้ style gap: <ค่า><หน่วย> ได้
ต้องกำหนด Flex wrap ทุกครั้งที่มีการใช้งาน Flex และมี Object อยู่ภายใน Container มากกว่า 1 Object
เพื่อป้องกันการบีบตัวของ Object เมื่อมี Size ที่เล็กลงในขนาดหน้าจอที่เล็กลงจนเสียรูปลักษณ์ ให้ใช้ style flex-wrap: wrap; หรือ flex-wrap เสมอ
กำหนด Font Size
จะต้องมีการกำหนด Font Size ในขนาดที่เหมาะสมกับขนาดของ Device ของผู้ใช้
จะต้องมีการกำหนด style font-size สำหรับ html, body เป็นค่า Default ก่อน ด้วยหน่วย px
ใช้งานส่วนของ Sizing ตัวอักษร ใน CSS ด้วยหน่วย rem
จะต้องมีการกำหนด font-size ด้วยความคงที่และใช้หน่วย rem ที่จะสัมพันธ์กับขนาดของหน้าจอและ default font-size โดยอัตโนมัติเช่น 1rem จะเท่ากับ default size