RWD響應式斷點設計

kent00pg 13 views 36 slides Sep 19, 2025
Slide 1
Slide 1 of 36
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36

About This Presentation

RWD響應式斷點設計


Slide Content

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

什麼是 RWD

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

響應式起手式

meta:vp

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

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

<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%

沒有設置 viewport 的網頁

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

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

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

設置容器

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

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

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

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

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

min-width

設置斷點

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

裝置大小 手機優先 min-width : 裝置從小到大 桌機優先 max-width :裝置從大到小

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

過度版型

常見疑問

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

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