什麼是斷點 ( Breakpoint ) ? 簡單來說就是為了這個版型，我們設計了幾個 media query，兼容哪幾個螢幕解析度。
通常只會針對常見和熱門的螢幕解析度去做斷點設計，像是 ipad、iphone 或是市面上常見的手機螢幕解析度來做優化。
如何替客戶設計響應式斷點? 遵循 80/20 法則
如果客戶有舊網站時，可以先透過客戶的 GA 分析觀察數據，了解客戶網站的族群的熱門裝置，去做斷點設計，但如果沒有可參考的舊網站，則先以目前最熱門的解析度去設計就好，這樣其實可以滿足 80% 以上大部分的用戶了。
Mobile first ? Desktop first ?
以往傳統在設計網頁時，通常會以 desktop 桌機優先，但現代手機普遍被使用，才會有響應式的設計出現，因此當我們從手機版開始設計版型，也就是 Moblie first，則會搭配 min-width 來做斷點的設計。舉例來說 : @ media(min-width: 768px) ，意思是當解析度超過 768px 時，其 CSS 設定會被開啟。
而當我們寫到桌機版時，現在電腦的螢幕解析度越做越大，此時我們可以設定一個 max-width 去固定最外層容器的寬度，並且搭配 margin: 0 auto; 水平置中，網頁內容則不會滿版顯示，使用者閱讀起來也會比較舒適。
— Note : 目前瀏覽器、螢幕解析度等的市占率高低，都可以透過 statcounter 這 個網站去做查詢唷！
— 補充 : 熱門的螢幕解析度
- 768px : iPad 直式
- 767px : iPad 直式以下 ( 皆可視為手機 )
- 414px : iPhone 6/7/8 plus ( 視專案族群 )
- 375px : iPhone 6/7/8/X (視專案族群)
- 320px : iPhone 5、SE
如果覺得我的文章寫得不錯或是有幫助到你，可以拍手讓我知道，對我來說是很大的鼓勵，謝謝:)
