鏈接：https://www.zhihu.com/question/21042513/answer/287207544
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
網頁設計中，寬度的設置，是沒有絕對固定的值的，根據我們的需求出發。這里我做個詳細的網頁寬度設置科普。
網頁的寬度主要分兩種：
- 定寬：內容區域寬度固定
- 自適應：內容區域寬度跟隨瀏覽器變化
一、定寬模式
定寬是我們日常最常見的形式，主流的寬度有 960px / 980px / 1190px / 1210px 等。那么為什么會出現這幾個寬度，而不是我們想象中顯示器分辨率常見寬如 1024、1280 呢？
1、客戶端顯示器局限性：
在定義網頁寬度時，我們第一件事是考慮我們的受眾用的顯示器。大家都知道，顯示器基本都是從 1024px 起始的，即使今天這個分辨率的顯示設備已經很稀有了（雖然ipad也使用這個規格），我們就要根據客觀條件考慮自己要支持最低的分辨率。
- 如為一些特定的企業設計web管理系統，應用的設備統一是 1440px 寬以上的，那么我們就要按這個寬度作為設計的標准開始設計設計稿。
- 如果要設計一個面向年輕群體的潮牌官網，可能就會為了更好的展示效果放棄低分辨率的用戶（主要集中在中老年群體），最低按 1366 寬開始支持。
- 如果是設計像淘寶這樣的要滿足所有人的網站，那么就要從最低的 1024 開始支持。
假設我們確定了 1024 寬的支持起點，那就還要再做一件事，確定一個主內容的區域寬出來。在我們使用 Word 的時候，大家都知道我們會給 A4 紙面設置一種參數類型叫頁邊距，不會讓文字內容直接貼在紙張邊緣上。
同理，網頁主內容的區域小於 1024 寬時，才能使左右產生留白。如知乎最小寬度下左右也會留出間距使內容不會直接貼到瀏覽器上。
知乎最小寬度截圖
在word這些工具中，我們對內容區域的定義是用總寬減去間距寬得出的，如果你要這么設置也不是不行，比如用 1024px 減去兩側各 20px 寬得到 984px 的內容區域。但是，主流的這些分辨率並不是依靠這種方式得到的，在網頁設計中，還有個重要的基礎知識點——柵格。
通過格線計算公式（ W =（a×n）+（n-1）i ）得到嚴謹實用的內容寬， 具體的可以看下面簡述的回答，不在這邊展開討論：
柵格應用示意圖
Web UI設計師需要了解的用柵格化系統指導網頁設計www.jianshu.com
所以，要知道 960px、980px 以及類似淘寶、京東這個級別網站所使用的界面寬，都是經過格線系統的體系推導而出的，而不是覺得某個整數看着比較順眼所以那么設置，即使你對柵格一點概念都沒有，也是可以使用這些寬度的。
最簡單的定寬長度設置： 寬度 = 支持最小寬度 - 左右留白
二、自適應模式
可能很多人聽過，響應式布局，尤其前幾年 H5 崛起的時候，很多初級網頁設計師都覺得，網頁設計以后就應該支持全平台，那些老的定寬規格都應該被淘汰。但是，寬度自適應模式和響應式設計不是完全相等的。
響應式設計，是在多種平台下可以良好顯示和運行的一種框架，在不同的寬度下回展現出不同的排版和樣式。
響應式設計在多平台的效果
響應式布局是什么，這里是介紹不完的，可以去下面這個網站了解：
Bootstrap中文網我不怎么推薦大家去使用響應式設計，因為局限性太大，實際的項目開發時長可能還不如 PC、移動端分別開制作。
而一般自適應寬模式，是讓主內容區域可以隨畫布的拉伸而做調整，讓整個瀏覽器的畫布區域被最大化利用，展示更多的文字信息或圖像，帶來更好的瀏覽體驗（設計得好的情況下）。
主流的自適應寬度產品主頁
小米MIX 2 - 小米商城www.mi.com
在這種模式下，使用 1920px 或更大的寬來設計是沒問題的。但是，你還需要定義一個最小的寬，再出一版設計，來展示極限情況下的視覺效果。因為很多用戶會在操作系統中縮小瀏覽器的寬度來並排其它窗口。
知乎全屏編輯模式的最窄狀態
但到了今天和未來，2K、3.5K、4K 顯示器越來越普及，設計師是虛要考慮 1080P 以外的顯示怎么辦的。
在 3440px 寬下的QQ主頁，背景缺了一塊
在 3440px 寬下的小米主頁，背景長短不一
設計自適應寬的界面，可以先選用一個合適的寬度作為基礎，如 1440px、1920px 等，給出模塊拉伸的方案，然后給出最小寬度效果、超出的應對的措施。
天貓在 3440px 下的樣式，對 Banner 延長做了處理
要設計出切實可行的方案，是需要設計師完全熟悉 HTM5L+CSS3 和基礎 JS 的，還需要考慮過大的寬度適應下配圖的清晰度和讀取效率問題。空談自適應和響應式布局絕對是浪費團隊時間的做法。
三、結尾
還需要做一些說明的是，即使我們采用了定寬的模式，也可以在特定的模塊使用自適應模式進行組合的，常見的就是網頁的頭部和底部，還有部分帶有背景色、圖案的模塊。如上圖天貓的案例。、
不要用太大的畫布進行設計。否則設計出來的演示稿會沒有觀賞性，對預覽效果大打折扣，比如看下面天貓頁面的截圖當成演示稿的話，肯定比上方那張大量留白的看起來順眼多了。
裁切掉多余延長的展示樣式
結論：
網頁設計師的目標就是在瀏覽器和開發語言的限制下找出合適的設計方案。如果沒有把握，請就使用 960/980px 的方案即可。如果要使用更寬的畫布，則一定要弄明白各項限制和緣由。