昨天在完成顏色轉換之後，我就在想，要是換成手機，或平板打開會不會爆版呢？於是，這就是今天我所想達到的目標，這樣一來，不論是用甚麼裝置，都不至於讓畫面太難使用。那問題來了，為什麼要做 RWD呢？因為考慮到現在大部分人，其實都是用手機在記任務比較多，想像一下，如果按鈕太小、清單跑版，那即使整個網站再美觀，也會讓人用不下去，所以 RWD 就有點像一件會自動伸縮的衣服，讓網站在不同螢幕下都能合身！
為了達到以上的設計構思，需要做到以下幾步：
1.設定斷點：在 CSS 裡加入 Media Queries讓不論是手機、平板，又或是電腦都能很好的調整過來。
２.調整導覽列：讓桌面可以導覽列水平排列；讓手機可以換成類似漢堡選單，那種不會擠到標題的樣子。
3.觸控友善：讓所有的按鈕的輸入框最小高度定在 44px；加大點擊區域，讓手指操作更舒服；也要記得字體比例要隨螢幕調整。
測試過程使用 Chrome DevTools 裝置模擬器 ，進行測試，成果長這樣：
手機（i14pro）：

平板（ipad pro）：

桌機（一般桌面）：

現在網站能做到不再跑版，也能讓手機/平板/桌機都好操作，字體大小、觸控面積、導覽列更是都合身，看了實在非常開心，期待明天的文章吧 !