「響應式設計」的誤解
「手機版會自動縮小嗎？」是最常被問到的問題之一。
答案是「不只如此」。如果網站的手機版只是把桌機版等比例縮小，那幾乎可以確定：手機上的體驗會很差。
真正的響應式設計問的問題是：「這個用戶在這個裝置上，最想完成什麼任務？我的設計應該如何服務這個目標？」
對同一個目標，在不同裝置上的最佳解法可能完全不同。
為什麼響應式設計不能只是縮放？
一、螢幕大小改變了閱讀模式
在桌機上，使用者通常是「看整體」，視線可以快速掃描大範圍的頁面。在手機上，使用者是「單列閱讀」，一次只能看到畫面的一個區塊，往下滾動是主要的瀏覽動作。
如果你的桌機版有三欄的服務說明，縮成手機版後變成三個被擠壓的窄欄，這個設計在手機上已經失敗了。應該的做法是：在手機上變成三個各佔全寬的卡片，垂直排列。
二、觸控和滑鼠的互動方式不同
滑鼠可以瞄準 10px × 10px 的精確目標，手指觸控的有效範圍至少需要 44px × 44px（Apple Human Interface Guidelines 建議值），最好是 48px 以上。
如果你的按鈕在手機上只有 28px 的高度，使用者會頻繁誤觸，或根本無法點中。
三、上下文不同，優先順序不同
手機使用者常常在移動中、時間有限。他們想要的是「快速取得關鍵資訊」——你在哪、你做什麼、怎麼聯絡你。
桌機使用者較可能坐下來慢慢研究，願意閱讀更多細節。
所以同一個頁面的資訊優先順序，在不同裝置上應該有所調整。手機上應該把最重要的 1-2 個行動指引放在最前面，而不是把桌機版所有內容塞進來。
技術面：斷點（Breakpoints）的設計
斷點是設計在哪個螢幕寬度「切換到不同版型」的臨界值。常見的基準：
- 手機：360-480px
- 平板（直向）：600-768px
- 平板（橫向）/ 小桌機：1024px
- 標準桌機：1280px+
一個重要原則：斷點應該由你的設計自然決定，而不是由「主流裝置尺寸」決定。
意思是：先設計主要版型，然後把瀏覽器視窗慢慢縮小，當版型開始「看起來不對」或「資訊顯示不完整」的那個寬度，就是你需要加一個斷點的地方。
不要只做「手機版」和「桌機版」兩種，而忽略中間的過渡態。
圖片在響應式設計中的處理
srcset 和 sizes
不要對所有裝置載入同一張 1920px 的圖片。手機螢幕顯示寬度是 390px，載入 1920px 的圖只是浪費頻寬。
使用
在 Next.js 中，Image 而不是原生
圖片裁切方向
桌機通常使用橫向（16:9 或 3:2）的圖片，手機介面更適合方形（1:1）或接近直向的比例。
好的響應式圖片設計會讓桌機和手機分別顯示裁切方向不同的版本，而不是讓直向螢幕顯示被擠壓的橫向圖。
測試響應式設計的方法
不要只在自己的手機上測試——你的手機只是一種型號，但使用者用的裝置五花八門。
實用的測試方式：
Chrome DevTools 裝置模式：在瀏覽器按 F12 開啟開發者工具，點選「裝置工具列」，可以模擬各種手機和平板螢幕尺寸。
BrowserStack 或 LambdaTest：真實裝置測試服務，可以在真實的 iOS 和 Android 裝置上看到你的網站。
直接找幾個不同手機品牌的朋友試看，詢問「有沒有什麼地方怪怪的、看不清楚的？」
真實使用者的反饋往往比任何模擬工具都直接。