RWD響應式斷點設計

RWD響應式斷點設計

1. RWD 響應式斷點設計 什麼是 RWD 設置容器 設置斷點 常見疑問

2. 什麼是 RWD

3. 透過 CSS media query 讓網頁能 隨著 不同 裝置尺寸 自動 改變排版佈局

4. 響應式起手式

5. meta:vp

6. 可視範圍 viewport 指網頁的可視區域，代表視窗的寬度。 viewport meta 針對行動裝置對於 可視範圍 寬度尺寸和縮放行為的 控制 。

7. Viewport & Window window 是指瀏覽器的整個 瀏覽器窗口 viewport 是指在設備上顯示網頁的 可視範圍

8. <meta name="viewport" content=" width=device-width , initial-scale=1.0 "> width=device-width 將瀏覽器頁面寬度設置為當前裝置的寬度（ex: 平板、手機） width 的合法值為 device-width 或正整數 預設值為 980px ，最小值為 200px，最大值為 10000px initial-scale=1.0 畫面初始縮放比例為 100%

9. 沒有設置 viewport 的網頁

10. 網頁能隨著 不同 裝置尺寸 自動 改變排版佈局

11. 網頁根據視窗 viewport 大小來呈現 當網頁 未設置 viewport meta 標籤時，行動裝置瀏覽器會使用 預設 的 viewport 寬度（如 980px）來渲染頁面，而非使用裝置的實際寬度，使內容被縮小顯示。

12. media queries 影響 行動裝置對於 可視範圍 寬度尺寸和縮放行為的 控制

13. 設置容器

14. 從設計稿找容器 1 尋找邊界 2 容器切齊

15. 尋找邊界 從設計稿中 找出 各個 區塊的邊界

16. 容器切齊 水平置中 限制最大寬度

17. 水平置中 1 寫死固定值 容器左右寫死 padding、margin 固定值間距 。 2 彈性縮放 flex 外層 justify-content: center 子層 margin: 0 auto

18. 限制最大寬度 max-width 寫死固定值 + width : 100% 固定數值可以確保在各種設備上都能正確顯示，也會更符合設計稿的最大寬度和水平置中需求。

19. min-width

20. 設置斷點

21. 從設計稿找斷點 1 確認設計稿提供的版型 確認 至少 @media 有幾個斷點 2 過度版型 當不同版型的斷點差距過大，就需要和設計師討論增加 過度版型 ，讓響應式縮放的體驗更好。

22. 裝置大小 手機優先 min-width ： 裝置從小到大 桌機優先 max-width ：裝置從大到小

23. 確認設計稿提供的版型 1 桌機版 設計稿應提供桌機版的版型,作為響應式設計的基礎。 2 手機版 在最小斷點上,設計稿應提供手機裝置的特定版型。

24. 過度版型

25. 常見疑問

26. 排版規劃 桌機版 設計適合大螢幕的完整佈局。 平板版 針對中等尺寸螢幕進行調整。 手機版 針對小型螢幕進行最佳化。

27. @media screen 對於 media-type 設置更準確的類型 screen，可以將裝置限制在 彩色螢幕裝置