近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域，那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門：畫出有程式邏輯的設計稿 中關於如何「響應式排版」的介紹。
課程相關資訊
[連結]：https://courses.hexschool.com/courses/724307/lectures/13039055
本篇範圍：Chapter 7 ( 原子設計第四階段：模板 ) ，一共有 13 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 響應式網站主要是為了要讓使用者減少縮放、平移和捲動…等操作，以求更好的使用者體驗
2. Breakpoint 中斷點，實務上會做出手機、平板和桌機三種尺寸
3. 利用 Statcounter 來客製化選擇：在台灣常見的為 1920*1080, 768*1024, 360*640
4. Bootstrap 也可以當做參考
5. Fixed Grid, Fluid Grid 的差別在於網格內的內容，圖片和文字是否會跟著縮放
6. 行動版的介面優化，需要考量到欄間距 ( gutter ) 和 margin 是否會因尺寸大小而變化
