今天我要幫記帳 App 加入 RWD（響應式網頁設計）。
我發現我的app到了手機上會出現左右欄位擠在一起、Header 按鈕爆框等問題，
因此今天主要讓 App 能適應不同螢幕尺寸。

手機版改成上下排列
從電腦上來看，當月明細和財務圖表是左右雙欄，但手機螢幕較窄，所以我利用 Media Query 在 768px 以下改成上下排列：

桌機維持雙欄，手機則變成：
當月明細
↓
財務圖表

處理卡片寬度問題
在調整成單欄後，發現不同區塊的寬度還是不一致，因此加入：

讓 padding 和 border 也計算在元素寬度內。

手機版則統一設定主要區塊寬度：

在這邊我學到了width、min-width 和 max-width 都可能影響最後的實際尺寸。

解決 Header 爆框
手機因為空間不足，月份選擇器和匯出excel按鈕會互相擠壓，
所以手機版改用 Flexbox，並加入：

其中 flex-wrap: wrap 可以讓內容放不下時自動換行，避免硬擠在同一行。
除此之外，搜尋、篩選和按鈕區域，在手機上也改成上下排列：

讓輸入框和按鈕在手機上更容易操作。

這邊貼上成果：
電腦畫面:

手機畫面:

總結：
我發現，RWD 不只是加上 Media Query 就完成了。
實際測試後，還是會遇到卡片寬度、min-width、Grid 擠壓、按鈕爆框各種問題。因此這次也是透過：
AI 修改 → 手機模擬器測試 → 發現問題 → 再讓 AI 修正
不斷調整版面，來讓我的app更加完善。