網站設計尺寸有標準答案嗎？2026 建議先用這張表
2026 年網站設計尺寸沒有單一標準，但可先用桌機 1440px、手機 390px、平板 768px 或 1024px 建立 Figma 畫板，再用多個 viewport 測試。
| 裝置 | 建議設計畫板 | 常用測試尺寸 | 適用情境 | 注意事項 |
|---|---|---|---|---|
| 桌機版 | 1440px 寬 | 1280 / 1366 / 1440 / 1920 | 官網、Landing Page、內容頁主要設計稿 | 不要把內容撐滿整個畫板 |
| 大螢幕預覽 | 1920px 寬 | 1920 | 檢查滿版背景、寬螢幕留白 | 通常不是主要內容寬度 |
| 平板版 | 768px 或 1024px 寬 | 768 / 834 / 1024 | 導覽列、卡片、雙欄內容轉換 | 不要只把桌機稿等比例縮小 |
| 手機版 | 390px 寬 | 360 / 375 / 390 / 414 | 手機閱讀、表單、CTA、選單 | 360px 必測，最容易爆版 |
三個結論先記住：桌機設計稿可用 1440px 起步，手機設計稿可用 390px 起步，真正驗收要看多尺寸測試。我的判斷是，新手最常犯的錯不是選錯 1440 或 1920，而是只交一張漂亮畫板，沒有說明內容寬度與斷點。
桌機版建議畫板：1440px 或 1920px
桌機版主要建議用 1440px，因為它能兼顧常見筆電與桌機瀏覽寬度。1920px 適合檢查大螢幕滿版背景、左右留白與寬螢幕視覺節奏，但不建議把所有文字、卡片、表單都拉到 1920px。
手機版建議畫板：390px，並測 360 / 375 / 414
手機版 Figma 畫板可先開 390px，這個寬度適合作為主要排版基準。交付前仍要測 360px、375px、414px，尤其是導覽列、雙欄卡片、價格文字、表單欄位與長按鈕文字。
平板版建議畫板：768px 或 1024px
平板版可用 768px 檢查小平板直向，用 1024px 檢查橫向或較寬平板。若專案的平板流量很少，至少要確認桌機版轉手機版的中間狀態不會出現空洞或卡片排列不自然。
為什麼 1920px 不等於網站內容要做滿 1920px？
1920px 是常見螢幕解析度或預覽寬度，內容寬度通常應控制在 1120 到 1280px；背景可滿版，主要文字與操作區要用 container 限制。
| 網站情境 | 建議內容寬度 | 適合做滿版的元素 | 判斷規則 |
|---|---|---|---|
| 企業官網 | 1120 到 1280px | Hero 背景、品牌視覺區塊 | 文字、服務卡片、案例列表需維持可讀行長 |
| 部落格內容頁 | 720 到 960px 文章欄，外層可到 1120px | 頁首底色、分隔區塊 | 段落太寬會降低閱讀速度 |
| 電商網站 | 1200 到 1440px | 分類背景、活動橫幅區 | 商品卡片可多欄，但篩選器與價格資訊不能擠壓 |
畫板可以是 1440px，但主要內容常落在 1120-1280px
Figma 畫板寬 1440px 時，主要內容可以設定 1200px 左右，再留出左右空間。這樣在 1366px 筆電上不會太擠，在 1920px 螢幕上也不會讓文字散得太開。
Hero 背景可滿版，文字欄寬不能無限拉長
Hero 的圖片、底色、影片背景可以滿版，因為它們負責營造視覺範圍。標題、副標、按鈕與表單則要收在可控寬度內。行長過長會讓讀者讀到一半失去定位，這在品牌官網與長銷售頁都很常見。
左右 padding 在手機版通常要保留 16-24px
手機版內容不應貼齊螢幕邊緣。一般可先用 16px 到 24px 作為左右 padding，表單、卡片、按鈕與段落都應維持一致邊界。若按鈕文字很長，先改文案或換行，不要直接壓縮到難點擊。
Figma 裡網站設計尺寸要怎麼設定？
Figma 做網站設計時，建議先建立桌機 1440x1024、平板 768x1024 或 1024x768、手機 390x844，再設定 layout grid 與內容寬度。
- 新增 Frame，先建立桌機、平板、手機三組畫板。
- 桌機畫板寬 1440px，內容區先抓 1200px 左右。
- 手機畫板寬 390px，左右 padding 先用 16px 或 20px。
- 設定 Layout Grid，桌機用 12 欄，手機用 4 欄。
- 在設計稿標註 container、breakpoint、margin、gutter 與主要元件狀態。
| 畫板 | 建議 Frame | 內容區設定 | Grid 起步值 |
|---|---|---|---|
| 桌機 | 1440x1024 | 1120 到 1280px | 12 欄 |
| 平板直向 | 768x1024 | 依版面保留 32px 到 48px padding | 6 或 8 欄 |
| 平板橫向 | 1024x768 | 可檢查雙欄與導覽轉換 | 8 或 12 欄 |
| 手機 | 390x844 | 保留 16px 到 24px padding | 4 欄 |
桌機 Frame：1440px 寬，內容區抓 1200px 左右
桌機 Frame 可從 1440px 起步，高度不用追求固定標準，常用 1024px 作為首屏設計參考即可。內容區抓 1200px 左右，能讓導覽列、卡片、案例、表單都有穩定對齊基準。
手機 Frame：390px 寬，實作時再測 360px
390px 適合設計主要手機版，但 360px 是 QA 時的壓力測試。我的經驗是，只看 390px 很容易忽略長中文標題、價格欄位、雙按鈕並排與表單提示文字的問題。
Layout Grid：12 欄桌機、4 欄手機即可起步
Layout Grid 的目的不是讓每個元素都塞進欄位，而是建立一致的對齊邏輯。桌機先用 12 欄，手機先用 4 欄，平板則依內容密度選 6、8 或 12 欄。
桌機 margin / gutter 建議
桌機可用 1200px container 搭配 12 欄 grid，gutter 可先抓 24px，左右 margin 依畫板寬度自動留白。資訊密度高的頁面可放寬到 1280px 或 1440px，但要檢查行長與卡片間距。
手機 margin / gutter 建議
手機可用 16px 或 20px margin，gutter 可抓 16px。若有兩欄卡片，先測 360px 是否仍能保留圖片、標題與按鈕的基本閱讀空間；不能保留時，手機版應改成單欄。
設計稿寬度、CSS px、螢幕解析度、DPR 差在哪？
Figma 的 390px 通常指 CSS viewport 寬度，不是手機螢幕實體像素；DPR 會讓實體像素比 CSS px 更高，兩者不能混用。
| 名詞 | 意思 | 網站設計時怎麼用 |
|---|---|---|
| Figma Frame | 設計稿畫板尺寸 | 用來規劃桌機、平板、手機版面 |
| CSS px | 瀏覽器排版使用的邏輯像素 | 設定 width、padding、breakpoint 的主要基準 |
| Viewport | 瀏覽器可視區域寬度 | 判斷 RWD 版面何時改變 |
| 螢幕解析度 | 裝置實體像素數 | 不應直接拿來當網站畫板寬度 |
| DPR | 實體像素與 CSS px 的比例 | 解釋為什麼手機實體像素比設計稿數字大 |
Figma 的 390px 是 CSS viewport，不是手機螢幕實體像素
以手機為例，某些裝置的實體解析度可能遠高於 390px，但瀏覽器排版仍可能以接近 390px 的 CSS viewport 計算。設計網站時，應先看 viewport 與 breakpoint，再處理圖片清晰度。
為什麼有些文章會說手機稿 750px？
750px 多半來自 2x 倍率思維，常見於早期行動設計或特定工具流程。這個數字可以用來理解倍率，但不適合作為現代 RWD 網站的主要 Figma 畫板寬度。台灣網站專案交付時，直接標 390px、375px、360px 會更清楚。
設計網站時應以 CSS px 與 responsive breakpoint 為主
網站會在不同 viewport 下重排，因此尺寸決策要回到 CSS px、container、padding 與 breakpoint。若設計稿只寫螢幕解析度，工程師仍要猜真正的版面規則。
桌機、筆電、平板、手機常用斷點怎麼抓？
RWD 斷點可先用 768px、1024px、1280px 作為主要版面轉換基準，再用 360 到 1920px 的測試尺寸檢查爆版。
| 裝置範圍 | 設計尺寸 | 測試尺寸 | 檢查重點 |
|---|---|---|---|
| 手機 | 390 | 360 / 375 / 390 / 414 | 選單、表單、CTA、長標題 |
| 平板 | 768 或 1024 | 768 / 834 / 1024 | 雙欄轉單欄、卡片排列、導覽列 |
| 筆電 | 1280 或 1366 | 1280 / 1366 | 首屏高度、側欄、表格 |
| 桌機 | 1440 | 1440 / 1920 | 內容寬度、滿版背景、留白 |
手機測試尺寸：360 / 375 / 390 / 414
360px 是小螢幕壓力測試，375px 與 390px 可代表常見手機寬度，414px 用來檢查較寬手機是否留白自然。手機版不要只看截圖漂亮，還要看手指能不能點、文字會不會擠在一起。
平板測試尺寸：768 / 834 / 1024
768px 常用來看平板直向，1024px 常用來看橫向或中型寬度。834px 可作為中間檢查點。若網站有側邊選單、篩選器或多欄卡片，平板尺寸不能省略。
桌機測試尺寸：1280 / 1366 / 1440 / 1920
1280px 與 1366px 能檢查筆電環境，1440px 是主要設計基準，1920px 用來檢查大螢幕。若 1920px 下整個頁面看起來鬆散，通常是 container 或區塊節奏沒有定好。
RWD、AWD 與相對單位：網站不是只做一個固定尺寸
RWD 讓同一份內容依 viewport 重排，AWD 則偏向針對特定尺寸做不同版面；實務上，多數網站應用 RWD 搭配 max-width、百分比與相對單位。
| 策略 | 做法 | 適合情境 | 尺寸判斷 |
|---|---|---|---|
| RWD | 同一套內容依寬度流動與重排 | 官網、部落格、電商、Landing Page | 用 breakpoint 控制版面變化 |
| AWD | 針對特定裝置或寬度做不同版面 | 特殊活動頁、複雜互動頁 | 需要更明確的裝置範圍 |
| 相對單位 | 用百分比、rem、vw、clamp() | 需要彈性縮放的內容 | 搭配 min-width 與 max-width 控制邊界 |
RWD 是同一套內容依寬度重排
RWD 的重點是內容在不同寬度下有合理流動，例如桌機三欄卡片、平板兩欄、手機單欄。這比硬做固定 1440px 更接近真實使用情境。
AWD 是針對特定裝置做不同版面
AWD 可針對特定尺寸輸出不同版面，適合高度客製互動或活動頁。但一般品牌官網若過度依賴 AWD，後續維護成本會變高，內容更新也容易漏版。
相對單位比固定寬度更重要
固定尺寸可以幫設計師建立基準，相對單位則決定網站能不能在真實裝置上穩定伸縮。常見做法如下：
.page-container { width: min(100% - 32px, 1200px); margin: 0 auto; }
.hero-title { font-size: clamp(32px, 5vw, 64px); }
不同網站類型的尺寸策略怎麼選？
不同網站不應套同一個內容寬度；官網重視品牌留白，Landing Page 重視手機轉換，電商與後台則要保留較高資訊密度。
| 網站類型 | 建議尺寸策略 | 內容寬度 | 測試重點 |
|---|---|---|---|
| 企業官網 | 1440px 畫板，穩定 container | 1120 到 1280px | 品牌首屏、服務卡片、案例區塊 |
| Landing Page | 桌機與手機都要完整設計 | 桌機 1120 到 1200px，手機 390px 測 360px | 首屏 CTA、表單、段落節奏 |
| 部落格 | 文章欄寬優先 | 文章 720 到 960px | 行長、目錄、引用區塊、表格 |
| 電商網站 | 卡片與篩選器優先 | 1200 到 1440px | 商品格線、價格、篩選側欄 |
| SaaS 後台 | 資訊密度與表格優先 | 1280 到 1440px 或更彈性 | 表格、側欄、固定工具列 |
| 作品集 | 視覺展示與閱讀節奏並重 | 視覺可滿版，文字需收斂 | 圖片比例、案例敘事、手機瀏覽 |
企業官網：重視品牌視覺與內容容器
企業官網可以有滿版視覺，但介紹文字、服務列表、客戶案例與表單應放在穩定 container 內。品牌感不是把畫面塞滿，而是讓重點有足夠呼吸空間。
Landing Page：重視首屏、CTA 與手機轉換
Landing Page 必須同時看桌機與手機。桌機首屏要能交代主張與 CTA，手機版則要確認按鈕、表單、價格與段落順序是否順手。若只能選兩個主畫板，我會選 1440px 與 390px。
電商與後台：重視資訊密度、表格與卡片排列
電商與後台常需要更寬的內容區，因為商品卡、篩選器、表格與操作欄都會吃空間。這類頁面可用 1280px 到 1440px 的內容寬度，但仍要替手機版重排資訊優先順序。
設計完成後，要用哪些尺寸做 QA？
設計完成後至少要測 360、390、768、1024、1440，完整 QA 可加測 375、414、1280、1366、1920，並檢查表格、選單、長文字與按鈕。
必測 viewport 清單
- 360px：檢查最小手機寬度、長字串、雙按鈕、表單欄位。
- 390px：檢查主要手機版閱讀與互動。
- 768px：檢查平板直向、卡片欄數、導覽列狀態。
- 1024px：檢查平板橫向與小筆電過渡狀態。
- 1440px：檢查主要桌機版設計。
- 1920px：檢查滿版背景、左右留白與內容是否過寬。
常見爆版問題：表格、選單、長文字、按鈕
表格在手機版最容易超出畫面，應規劃橫向捲動、卡片化或欄位精簡。選單要測展開狀態，長中文標題要測換行，按鈕文字要測最小寬度。這些問題在設計稿裡不先處理，開發後通常會變成臨時補洞。
可讀性與觸控尺寸檢查
手機版文字不宜過小，按鈕與可點擊區域要保留足夠高度與間距。表單欄位、下拉選單、固定導覽列與底部 CTA 都要在實機或瀏覽器模擬環境中檢查，尤其要看手機鍵盤彈出後是否遮住主要操作。
交給工程師前，設計稿要標清楚哪些尺寸？
交付網站設計稿前，必須標明 frame、container、breakpoint、grid、spacing、字級、元件狀態與手機特殊狀態，避免開發端猜尺寸。
每個 breakpoint 都要標明內容寬度與左右 padding
桌機、平板、手機至少要標出畫板寬度、內容最大寬度、左右 padding 與欄距。只給 1440px 滿版圖，工程師無法知道內容在 1366px 或 1920px 時該怎麼縮放。
元件狀態與 hover 不應只存在桌機版
按鈕、選單、表單、卡片、彈窗、錯誤提示都要有狀態規格。桌機有 hover，手機可能需要 active、disabled、展開與收合狀態。這些尺寸和狀態會直接影響切版品質。
手機鍵盤、表單、固定導覽列要另外檢查
手機鍵盤彈出後，表單欄位、送出按鈕與固定底部 CTA 可能被遮住。若有 sticky header 或固定導覽列，也要標明高度、層級與捲動時的行為。網站設計尺寸不是固定畫布，而是畫板、內容寬度、斷點與測試尺寸的一組決策。
網站設計尺寸的標準寬度是多少？
2026 年建議桌機先用 1440px 作為主要設計稿，並測試 1280、1366、1920；手機可用 390px 設計，並測 360、375、414。平板則可視需求補 768px 或 1024px。
網頁設計一定要用 1920px 嗎？
不一定。1920px 可當大螢幕預覽，但主要內容通常不應撐滿 1920px，應用 container 控制在 1120 到 1280px 左右；電商或後台可依資訊密度放寬。
Figma 做網站設計要開多大的 Frame？
建議桌機 1440px、平板 768px 或 1024px、手機 390px。若專案目標族群偏舊手機，手機版也要檢查 360px，避免長文字、按鈕與表單爆版。
手機版網站設計稿要用 390px 還是 375px？
390px 適合作為主要手機設計稿；375px 與 360px 適合作為測試尺寸。若 360px 能正常閱讀與操作，390px 通常會更穩定。
1366px、1440px、1920px 差在哪？
1366px 常見於筆電，1440px 適合作為設計稿基準，1920px 常見於 Full HD 螢幕。1920px 代表螢幕或預覽寬度，不代表內容寬度要做滿。
CSS px 跟螢幕解析度一樣嗎？
不一樣。網站版面通常用 CSS px 判斷 viewport；手機螢幕的實體像素會受到 DPR 影響，不能直接拿來當 Figma 畫板寬度。
為什麼有些人說手機設計稿要 750px？
那多半是以 2x 倍率思考的設計稿尺寸，不適合作為現代 RWD 網站的 CSS viewport 基準。台灣網站設計通常應先以 360 到 414px 的 CSS viewport 思考。
網站內容寬度建議多少？
一般官網與內容頁可抓 1120 到 1280px；資訊密度高的後台或電商頁可視情況放到 1440px，但仍要保留留白與可讀行長。
RWD 網站需要做幾個尺寸的設計稿？
基本至少桌機與手機兩版；若平板體驗重要，應補 768px 或 1024px。複雜網站建議再補關鍵區塊的中間斷點。
設計稿完成後要測哪些尺寸？
建議測 360、375、390、414、768、1024、1280、1366、1440、1920，並檢查導覽列、表格、按鈕、長文字與表單。