問十個人網頁設計的標準尺寸是多少，大概會拿到十個不太一樣的數字，而且每個人都覺得自己說的才對。原因不是有人記錯，而是這個問題其實混合了三件不同的事：設計稿要用多寬來畫、版面要在哪些寬度改變排列、圖片要輸出到多大。這三件事各有各的邏輯，混在一起談就永遠對不上。這篇把它們拆開，說明各自該怎麼決定，以及交付時要一併講清楚哪些資訊。
為什麼這個問題會得到不一致的答案
網頁和印刷品最大的差別，在於它沒有固定的畫布。同一個頁面會出現在小螢幕手機、平板、筆電、外接大螢幕上，使用者還可能把視窗拉成任意寬度、把系統字體調大、或是把瀏覽器分割成左右兩半使用。在這個前提下，追問一個唯一的標準尺寸，等於問一件會伸縮的衣服到底是幾號。
另一個造成混淆的原因，是像素這個單位在不同脈絡下代表不同東西。設計稿上的一個單位、瀏覽器計算版面用的邏輯單位、以及螢幕上實際的物理點，三者的數值可能完全不同。同一句話裡的一千兩百像素，設計師、前端與攝影師理解的可能是三件事，這是很多溝通誤會的來源。
設計稿寬度是溝通基準，不是最終輸出規格
設計稿一定要有一個寬度才畫得下去，但那個數字的意義是雙方對齊用的參考點，不是網站上線後的固定寬度。實際上線時，版面會在這個基準之上伸縮，因此設計稿真正要傳達的不是幾px，而是比例關係與伸縮規則：這個區塊是固定寬還是跟著容器變、圖片是滿版還是有留白上限、內文最寬到什麼程度就該置中。
常見的做法是至少畫兩份稿：一份代表寬螢幕的排列，一份代表窄螢幕的單欄排列，中間的狀態由前端依規則推導。如果版面在中間寬度有特別的排列變化，例如兩欄變三欄，就要另外補一份。只給一份寬螢幕稿而期待前端自行想像手機版長相，是後期反覆修改的常見起點。
還要留意設計稿上的字級與間距。稿子上看起來剛好的標題，在窄螢幕上可能一行只塞得下三個字，所以較長的實際文案要在設計階段就放進去測，不要用短短的假標題排完就定案。
斷點區間怎麼談，以及為什麼不要照機型清單設
斷點是版面改變排列的界線。業界確實存在一些習慣使用的區間，大致分成手機、平板、筆電、大螢幕幾段，這些數字方便溝通，可以拿來當作討論的起點。但它們是慣例而非規範，機型會推陳出新，使用者也可能把視窗拉成任何寬度，照著特定型號的解析度去設，很快就會出現對不上的狀況。
更可靠的判斷方式是看內容本身。把視窗慢慢拉窄，觀察版面在哪個寬度開始不好讀：文字一行剩不到十個字、卡片被擠成細長條、選單項目開始重疊，這些位置才是真正需要換排列的地方。用這個方式決定的斷點，不會因為明年出了新機型就失效。
實務上通常是兩者並用：以慣用區間作為溝通的共同語言，但實際數值依這個網站的內容微調。重要的是設計與前端要對同一組數字，並在交付文件上寫明，而不是各憑印象。
圖片輸出倍率與實際顯示尺寸的關係
圖片是最容易搞混尺寸的地方，因為它同時牽涉版面上的顯示寬度與螢幕的像素密度。高密度螢幕上，一個版面單位對應到的實體點數更多，所以圖片必須輸出比顯示尺寸更大的版本，看起來才不會糊。決定圖片尺寸時，可以照下面的順序來想。
- 先看顯示寬度：這張圖在版面上最寬會被顯示到多寬，這是計算的基準，不是設計稿的畫布寬度。
- 再乘上倍率：為高密度螢幕準備放大版本，讓圖在細緻螢幕上依然銳利。
- 準備多個尺寸：同一張圖輸出幾種寬度，由瀏覽器依實際螢幕挑選，避免手機下載大螢幕用的檔案。
- 裁切也要一起想：寬螢幕的橫幅換到窄螢幕常需要不同構圖，重要元素不要放在會被裁掉的位置。
- 格式與壓縮：照片與圖形適合的格式不同，壓縮程度要實際看過再定，不要一律用最高品質輸出。
圖示與標誌類素材則適合用向量格式，任何尺寸下都保持清晰，也不必準備多份倍率檔案。
交付設計稿時該一併附上的尺寸資訊
設計稿交給前端時，只給圖檔是不夠的。真正能減少來回的，是一份說明伸縮規則的補充資訊：哪些區塊固定寬、哪些跟著容器變、內文的最大寬度是多少、頁面左右的留白在窄螢幕時縮到多少為止。這些寫清楚，前端就不必猜。
另外要附上的還有各種狀態的樣子與素材規格。按鈕的一般、滑過、按下與停用狀態，表單欄位的錯誤與停用樣式，以及圖片素材需要輸出哪幾種尺寸。內容端也要說明可接受的圖片比例，否則後續上稿的人會上傳各種比例的照片，版面很快就亂掉。
常見問題
設計稿到底該用哪個寬度來畫？
選一個你的訪客最常使用、且團隊都認可的寬螢幕寬度當基準即可，重點不在挑到最完美的數字，而在整個團隊用同一個。真正需要額外說明的是伸縮規則，也就是比這個寬度更寬或更窄時版面怎麼變。只要規則講清楚，基準值差個幾十單位並不影響最後成品。
要不要為了某台特定裝置額外調整版面？
通常不需要，也不建議。為單一機型做特例，等於在樣式裡埋下只對某個尺寸生效的規則，日後很難維護，而且新機型出現後又要再補一次。如果某台裝置上真的破版，多半代表該區間的彈性設定有問題，應該調整整體規則讓那個寬度區間都正常，而不是針對它加例外。
網站有沒有最大寬度的限制？
版面本身可以滿版，但內文區塊建議設上限。一行文字太長時，眼睛從行尾回到下一行的行首容易看錯行，閱讀會變得吃力。常見做法是背景與圖片滿版，文字內容維持在一定寬度內置中，兩側留白。實際數值可以用真實文案排排看，以一行讀起來不費力為準。
手機版和電腦版的圖片可以用同一張嗎？
如果只是同一構圖的不同尺寸，準備多個寬度版本讓瀏覽器自行挑選就好。但若電腦版是很寬的橫幅，手機上直接等比縮小會變成一條細帶，主體也可能小到看不清。這種情況建議另外提供適合窄螢幕的構圖版本。判斷方式很簡單：把圖縮到手機寬度看一眼，主體還認得出來就不必另做。
沒有設計稿，直接照現成版型調整可行嗎？
可行，對預算有限的專案也是務實選擇，但要接受限制。現成版型的欄位結構與間距規則已經定好，能調整的多半是顏色、字體與圖片，版面邏輯要大改往往比重做還費工。選版型時，重點放在區塊結構是否符合你的內容，而不是示範圖好不好看。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
加入京采 LINE 好友相關主題
下一步
如果你正在評估「網頁設計標準尺寸」相關的規劃，可以參考我們的網頁設計服務，或直接與我們聯繫，我們會依你的產業與現況給出務實的建議。