最後幾天了！封面來喝個珍珠奶茶～ (ﾉ>ω<)ﾉ 🧋

直接進入今天的主題！

響應式排版技巧

隨著螢幕尺寸變化，版面會從小變大、從窄變寬，排版方式也需要跟著調整。以下將介紹響應式網頁中常用的版面轉換技巧。

1. 佈局結構調整：根據視窗寬度調整元素排列方式，從垂直排列變為水平排列，單欄變為多欄。
   • 設計考量
     • 小螢幕：左右空間有限，適合採用垂直排列。由於網頁文件流預設就是由上而下排列，因此先設定行動裝置版面會相對容易。
     • 大螢幕：左右兩側擁有更充裕的水平空間，可以改變元素的排列方式和數量，使元件水平排列。
   • 實作方法
     • 使用 flex 或 grid 的排版方式，改變元件的排列方向。
     • 使用具有 inline 效果的屬性（如：inline、inline-block、inline-flex），讓元素自然水平排列，自動換行。
2. 元素尺寸與間距縮放：按鈕、圖片、字體大小隨螢幕縮放，同時調整 padding、margin 保持視覺平衡。
   • 設計考量
     • 按鈕大小：需考慮觸控友善尺寸，建議最小 44px × 44px 才方便點擊。
     • 文字大小：避免過小的文字，容易觸發手機瀏覽器的自動放大功能，建議最小 16px。
     • 間距調整：使用相對單位如 rem 保持比例協調。
   • 實作方法
     • 使用 clamp()、vw 等彈性單位，實現平滑的動態調整，而非在固定斷點突然改變。
3. 內容顯示策略：根據螢幕大小調整內容的顯示方式和優先順序。
   • 設計考量
     • 小螢幕：空間有限，需要隱藏次要資訊或重新排列內容優先順序。
     • 大螢幕：空間較充裕，可以完整顯示所有內容。
   • 實作方法
     • 選擇性隱藏：使用 display: none; 隱藏次要資訊，搭配媒體查詢在不同斷點能隱藏對應版型，顯示適合當前裝置的介面結構。
     • 文字省略：使用 text-overflow: ellipsis 截斷過長文字。
     • 內容重排：利用 order 或 grid 屬性重新排列內容順序。
     • 選單收合：改用漢堡選單或更多選項按鈕，收納功能按鈕。
     • 使用捲軸：透過 overflow 屬性處理內容超出問題。當內容過多時使用 overflow: auto 顯示捲軸；若出現意外捲軸，檢查超出元素後使用 overflow: hidden 隱藏。
     • 使用頁籤或分頁：利用隱藏的 input[type="radio"] 搭配 :checked 偽類實現內容分頁切換。
4. 圖片比例控制：避免圖片因為尺寸差異過大，出現過胖或過瘦的視覺問題，確保圖片在不同容器中都能保持良好的顯示效果。
   • 設計考量
     • 比例一致性： 在列表或網格佈局中，不同比例的圖片會造成視覺不協調。
     • 容器適應：圖片需要適應不同尺寸的容器，同時避免變形或過度拉伸。
   • 實作方法
     • 固定圖片容器比例：使用 aspect-ratio 屬性設定統一的圖片顯示比例。
     • 避免圖片變形：搭配 object-fit: cover 讓圖片填滿容器並裁切多餘部分。
     • 響應式縮放：設定 max-width: 100% 和 height: auto 確保圖片不會超出容器。
     • 最小/最大尺寸：使用 min-width、max-width 限制圖片的顯示範圍。
5. 捲動方向引導：大部分使用者習慣垂直捲動，需要考慮不同裝置的捲動操作方式，應根據裝置特性調整內容呈現方式與引導方式。
   • 設計考量
     • 視覺提示：左右兩側可以露出部分內容，提示使用者還有更多資訊可以瀏覽。在水平捲動區域加入箭頭、漸變效果或捲動指示器，特別是針對桌面使用者。
     • 裝置操作考量：在行動裝置上，水平滑動手勢自然直覺，觸控操作讓水平捲動變得容易。但在桌面裝置上，由於依賴滑鼠滾輪進行垂直捲動，水平捲動需要額外操作（拖拉捲軸或觸控板手勢），可能需要左右兩側的按鈕或是明顯的捲軸提示。
   • 實作方法
     • 開啟水平捲軸： 使用 overflow-x: scroll 或 overflow-x: auto 啟用水平捲動。
     • 使用半透明漸層：在容器邊緣加入漸層效果，提示可捲動內容，可以利用絕對定位的半透明漸層色塊，或是使用 mask 屬性。
     • 捲軸樣式調整： CSS 提供 ::-webkit-scrollbar 這個選擇器，可以自訂捲軸外觀，讓使用者更容易發現。
6. 全螢幕高度處理：行動裝置上的瀏覽器由於上下還有網址列或按鈕列，使用 height: 100vh; 會擋到下方元件。
   • 設計考量
     • 瀏覽器 UI 變化： 行動裝置瀏覽器的網址列和工具列會動態顯示/隱藏，影響可視區域高度。
     • 使用者體驗： 避免重要內容被瀏覽器介面遮擋，確保所有功能都能正常操作。
   • 實作方法
     • 預留空間：使用 100vh 時，下方需預留空間給瀏覽器介面。
     • 替換視窗高度單位： dvh 可以動態取得手機瀏覽器可視高度，但因為瀏覽器 UI 會動態顯示/隱藏，可能造成內容跳動。為避免跳動，可改用 lvh（瀏覽器 UI 隱藏時高度）或 svh（瀏覽器 UI 顯示時高度）。
7. 互動模式轉換：注意網頁的互動方式，避免過度依賴 hover 效果。於行動裝置上時，應轉換為適合觸控裝置的操作模式。
   • 設計考量
     • 觸控友善：避免過度依賴滑鼠懸停的互動效果，需要時需改為觸控點擊操作。
     • 操作習慣：符合不同裝置使用者的操作習慣和預期。
   • 實作方法
     • 媒體查詢偵測：使用 @media (hover: hover) 偵測裝置是否支援懸停效果。
     • 狀態切換：用 :focus、:active 或 JavaScript 控制的 class 取代 :hover 效果。
8. 獨立版型設計：若現有元素結構無法透過 CSS 調整出合適的排版方式，可以為特定裝置設計完全不同的介面結構。
   • 設計考量
     • 使用情境：不同裝置的使用情境和需求可能完全不同，需要針對性的設計。
     • 管理成本：由於是不同的版型，使用過多會使介面不好管理，增加維護複雜度。非必要情況下，還是建議使用相同的 HTML 結構搭配不同的 CSS 來變化版面。
   • 實作方法
     • 使用 display: none; 在不同斷點隱藏對應版型，只顯示適合當前裝置的介面結構。

Container Query 容器查詢

Container Query 是較新的 CSS 功能，能讓元素根據父容器的尺寸來調整樣式，而非像 Media Query 依據視窗尺寸調整樣式。

.container {
  container-type: inline-size;  /* 啟用容器查詢 */
}

@container (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container (max-width: 599px) {
  .card {
    display: block;
  }
}

Container Query 的優勢：

• 元件可以根據自身容器大小調整，而非整個視窗。
• 讓元件更具可重用性和模組化，特別適合設計系統和元件庫。

總結

這幾天介紹了響應式網頁設計（RWD）的核心概念與實作技巧，從基礎的 viewport 設定到進階的媒體查詢應用。透過這些知識，你現在能夠：

1. 正確設定 viewport meta 標籤，讓網頁在行動裝置上正常顯示
2. 根據裝置尺寸設定合理的斷點，並運用 Media Query 切換樣式
3. 選擇 Mobile First 或 Desktop First 策略進行響應式開發
4. 使用相對單位與 clamp() 函數實現彈性的尺寸設定
5. 掌握響應式排版技巧，包括佈局調整、尺寸縮放、內容策略等

掌握這些技巧後，你將能夠創建在各種裝置上都能提供優質瀏覽體驗的網頁。確認網頁版面時，可以拖拉瀏覽器視窗大小來檢查樣式是否正確套用，或使用瀏覽器開發者工具（F12），模擬多種裝置尺寸來瀏覽網頁。