網頁設計尺寸怎麼抓？桌機、平板、手機與 RWD 尺寸指南

網頁設計到底要做多大，常常不是一句「用 1920px」或「用 375px」就能回答。

桌機版要抓 1920px、1440px，還是 1280px？手機版又該選 375px、390px，還是其他尺寸？這些問題看起來很像在找一個標準答案，但實務上更重要的是：你的網站內容要怎麼在不同螢幕下維持清楚、好讀、好操作。

現代網頁並沒有一組所有網站都必須遵守的固定尺寸。

設計師通常會挑選幾個具有代表性的桌機、平板與手機寬度作為設計與測試基準，再透過 RWD（Responsive Web Design，響應式網頁設計），讓版面依不同螢幕與瀏覽器寬度自動調整。

因此，真正需要理解的並不是「網頁標準尺寸是多少」，而是：

設計稿應該選擇哪些尺寸作為基準？
螢幕解析度與網頁寬度有什麼不同？
桌機、平板、手機應該如何安排版面？
RWD Breakpoint 應該怎麼設定？
網站圖片又該準備多大的尺寸？

網頁設計尺寸是什麼？

在討論網頁設計尺寸之前，先把幾個常被混在一起的概念分開，會比較好理解。

1. 螢幕解析度

螢幕解析度是裝置實際可顯示的像素數量，例如 1920 × 1080、2560 × 1440。

但螢幕是 1920px 寬，不代表網站內容區就一定要設計成 1920px。

2. Browser Viewport

Viewport 可以理解成瀏覽器目前真正拿來顯示網頁內容的可視區域。

即使使用相同的螢幕解析度，只要瀏覽器沒有全螢幕、側邊欄開啟，或視窗被縮小，可用的 viewport 寬度就會改變。

3. 網頁內容寬度

網站背景、照片或 Hero 視覺可以延伸到整個螢幕，但文字、產品資訊、文章或主要操作內容通常不會無限制地往左右拉開。

因此很多網站會設定一個主要 Content Container，限制內容最大寬度，再依不同 viewport 自動留白或縮排。

1920px 的螢幕，不等於網站主要內容就應該做到 1920px 寬。

桌機版網頁設計尺寸怎麼抓？

桌機網站沒有唯一標準尺寸，但實際設計時，通常會先選幾個常見寬度作為檢視基準。

使用情境	可作為設計與測試的參考寬度
較小型筆電或視窗	約 1280px
一般桌機設計基準	約 1440px
Full HD 顯示環境	1920px
主要內容 Container	常依網站需求控制在約 1100～1400px 範圍

上面的數字適合作為設計與測試參考，不是所有網站都必須照著設定的固定標準。

例如品牌形象網站可能大量使用滿版圖片與留白；內容型網站會更重視文字閱讀寬度；電商網站則常受到商品 Grid、篩選器與側邊欄配置影響。

因此，比起先決定「網站要做 1440 還是 1920」，更重要的是先確認：

主要內容最大寬度
左右留白比例
Grid 欄位數量
文字每行適合的閱讀長度
畫面變窄後，哪些元素需要重新排列

手機版網頁設計尺寸怎麼抓？

手機設計常見的參考 viewport 寬度包括：

360px
375px
390px
414px

這些數字的用途，不是讓網站只支援這幾種手機，而是提供設計師一個可以實際製作、檢查與溝通的基準。

真正上線後，網站仍應該可以適應 361px、384px、412px 或其他不同寬度。

手機設計稿需要一個基準尺寸，但 RWD 網站不應該只在那個尺寸下才能正常顯示。

375px 和 390px 要選哪一個？

兩者都可以。

如果團隊已有既定的 Design System，可以沿用既有基準；如果沒有，選擇其中一個常見寬度作為主要 Mobile Design Frame，再另外測試較窄與較寬的 viewport 即可。

真正應該避免的是：設計稿在 390px 看起來正常，但到了 360px 就出現文字被擠壓、按鈕超出畫面或圖片裁切錯誤。

平板版需要另外設計尺寸嗎？

不一定。

是否需要獨立 Tablet Layout，取決於網站內容複雜度。

如果網站只有簡單的文字、圖片與少量區塊，Desktop 與 Mobile 之間的 Responsive Rules 有時就足以處理。

但如果網站包含：

複雜 Mega Menu
多欄式產品 Grid
大型比較表格
側邊篩選器
複雜 Dashboard
大量橫向資訊

就可能需要獨立處理 Tablet 狀態。

所以，不應該把「768px 就一定是平板版」視為固定規則，而是要觀察版面在哪個寬度開始無法維持原有資訊結構，再決定是否需要增加 Breakpoint。

RWD Breakpoint 應該設定多少？

Breakpoint 是當 viewport 寬度到達某個範圍時，網站開始改變版面配置的條件。

實務上常會看到類似：

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
}

但 768、1024、1280 並不是所有網站都必須使用的固定值。

更合理的做法是：

先完成主要版面。
逐漸縮小或放大瀏覽器 viewport。
觀察內容在哪個寬度開始過度擁擠、斷行、變形或難以操作。
在真正需要重新配置版面的地方建立 Breakpoint。

也就是說：

Breakpoint 應該由內容與版面決定，而不是只由某一款手機、平板或螢幕型號決定。

網頁內容寬度為什麼不應該跟螢幕一樣寬？

大型螢幕越來越普遍，但網站並不是越寬就越好。

如果一整段文章文字橫跨整個 1920px 螢幕，使用者閱讀時眼睛必須不斷從很左邊移動到很右邊，反而會降低閱讀效率。

因此現代網站常見的做法，是把不同內容分開處理：

背景：可以 Full Width。
Hero 圖片：可以延伸到全螢幕。
主要文字：限制在適合閱讀的寬度。
產品或作品 Grid：依螢幕寬度增加或減少欄數。
CTA：保持足夠的可視性與操作空間。

所以網站設計尺寸真正影響的，是資訊如何在空間中重新配置，而不是單純追求最大的 Pixel 數字。

網頁圖片尺寸要準備多大？

圖片尺寸也是網頁設計中最常被誤解的問題之一。

圖片並不是越大越好。

如果一張實際只顯示 600px 寬的圖片，卻讓所有使用者都下載一張 4000px 的原始照片，雖然看起來可能很清楚，但也會增加檔案大小與下載時間。

圖片通常應該依：

實際顯示尺寸
不同裝置 viewport
高像素密度螢幕
圖片壓縮品質
網站效能

一起評估。

現代網站也可以透過 srcset 與 sizes 等 Responsive Image 機制，讓瀏覽器根據使用者的裝置與顯示條件選擇適合的圖片版本，而不是所有裝置都下載同一張大型圖片。

除了檔案尺寸之外，圖片的 ALT、檔名與內容關聯性也會影響搜尋引擎理解圖片，可以進一步參考圖片 SEO 的 ALT 與 Title 設定方式。

現在的網頁設計還需要固定尺寸嗎？

設計稿需要基準尺寸，但實際網站不應該被限制在固定尺寸。

這兩件事情要分開看。

設計工具需要一個 Frame，因此 UI／Web Designer 仍然需要選擇例如 1440px Desktop、390px Mobile 等尺寸進行設計。

但是前端網站真正上線後，使用者的裝置可能是：

1366px 筆電
1440px 桌機
1920px 螢幕
超寬螢幕
390px 手機
360px 手機
直向平板
橫向平板

網站不能要求所有使用者都剛好用設計稿原本的尺寸瀏覽。

因此現代網頁設計真正應該採用的思維是：

以代表性尺寸進行設計，再用 Responsive Design 適應實際世界中的不同尺寸。

網頁設計尺寸快速整理

項目	建議觀念
Desktop 設計稿	可使用 1280、1440、1920 等代表性寬度測試
Mobile 設計稿	360、375、390、414px 都可以作為測試基準
Tablet	依內容需求決定是否需要獨立版面
主要內容寬度	依閱讀性、Grid 與網站類型限制最大寬度
Breakpoint	依內容開始失去正常版面的位置決定
圖片	依實際顯示需求提供適合尺寸，不是越大越好
實際網站	應使用 Responsive Design 適應不同 viewport

網頁設計尺寸常見問題 FAQ

網頁設計最常用的尺寸是多少？

沒有唯一的標準尺寸。設計時通常會選擇幾個具有代表性的 Desktop、Tablet 與 Mobile viewport 作為設計與測試基準，再透過 RWD 處理其他不同寬度。

1920px 螢幕，網站也要設計成 1920px 嗎？

不一定。網站背景或大型視覺可以延伸到整個螢幕，但主要文字與內容通常會限制最大寬度，以維持閱讀性與版面品質。

手機網頁設計要用 375px 還是 390px？

兩者都可以作為設計基準。真正重要的不是只支援某一個尺寸，而是確認網站在較窄、較寬以及不同手機 viewport 下都能正常重新排列。

RWD Breakpoint 一定要設定 768px 和 1024px 嗎？

不一定。這些是常見參考值，但真正的 Breakpoint 應該依網站內容與版面在什麼寬度需要重新配置來決定。

網站圖片是不是尺寸越大越清楚？

不是。圖片過大會增加下載量與網站負擔。應依實際顯示尺寸、像素密度與不同裝置準備適合的圖片，並搭配 Responsive Image 技術。

結語

網頁設計尺寸沒有一組適用所有網站的固定答案。

1440px、1920px、390px 或 375px，都可以作為設計與測試基準；真正重要的是，網站在不同 viewport 下是否仍然保持良好的閱讀性、操作性與視覺結構。

與其一直問：

「網頁到底應該做幾 Pixel？」

更值得確認的是：

「這套版面在不同尺寸下，是否都能正確呈現內容？」

這才是 RWD 與現代網頁設計尺寸真正要解決的問題。