網頁設計中，寬度的設置，是沒有絕對固定的值的，根據我們的需求出發。這里我做個詳細的網頁寬度設置科普。

網頁的寬度主要分兩種：

定寬：內容區域寬度固定
自適應：內容區域寬度跟隨瀏覽器變化

一、定寬模式

定寬是我們日常最常見的形式，主流的寬度有 960px / 980px / 1190px / 1210px/1200px/1400px 等。那么為什么會出現這幾個寬度，而不是我們想象中顯示器分辨率常見寬如 1024、1280 呢？

客戶端顯示器有一定局限性，在定義網頁寬度時，我們第一件事是考慮我們的受眾用的顯示器。大家都知道，顯示器基本都是從 1024px 起始的，即使今天這個分辨率的顯示設備已經很稀有了（雖然ipad也使用這個規格），我們就要根據客觀條件考慮自己要支持最低的分辨率。

• 如為一些特定的企業設計web管理系統，應用的設備統一是 1440px 寬以上的，那么我們就要按這個寬度作為設計的標準開始設計設計稿。
• 如果要設計一個面向年輕群體的潮牌官網，可能就會為了更好的展示效果放棄低分辨率的用戶（主要集中在中老年群體），最低按 1366 寬開始支持。

• 如果是設計像淘寶這樣的要滿足所有人的網站，那么就要從最低的 1024 開始支持。

假設我們確定了 1024 寬的支持起點，那就還要再做一件事，確定一個主內容的區域寬出來。在我們使用 Word 的時候，大家都知道我們會給 A4 紙面設置一種參數類型叫頁邊距，不會讓文字內容直接貼在紙張邊緣上。同理，網頁主內容的區域小于 1024 寬時，才能使左右產生留白。如知乎最小寬度下左右也會留出間距使內容不會直接貼到瀏覽器上。

所以，要知道 960px、980px 以及類似淘寶、京東這個級別網站所使用的界面寬，都是經過格線系統的體系推導而出的，而不是覺得某個整數看著比較順眼所以那么設置，即使你對柵格一點概念都沒有，也是可以使用這些寬度的。

最簡單的定寬長度設置： 寬度 = 支持最小寬度 - 左右留白

二、自適應模式
可能很多人聽過，響應式布局，尤其前幾年 H5 崛起的時候，很多初級網頁設計師都覺得，網頁設計以后就應該支持全平臺，那些老的定寬規格都應該被淘汰。但是，寬度自適應模式和響應式設計不是完全相等的。

響應式設計，是在多種平臺下可以良好顯示和運行的一種框架，在不同的寬度下展現出不同的排版和樣式。

在這里成都創新互聯網站建設公司不怎么推薦大家去使用響應式設計，因為局限性太大，實際的項目開發時長可能還不如 PC、移動端分別開制作。而一般自適應寬模式，是讓主內容區域可以隨畫布的拉伸而做調整，讓整個瀏覽器的畫布區域被大化利用，展示更多的文字信息或圖像，帶來更好的瀏覽體驗（注：設計得好的情況下）。

在這種模式下，使用 1920px 或更大的寬來設計是沒問題的。但是，你還需要定義一個最小的寬，再出一版設計，來展示極限情況下的視覺效果。因為很多用戶會在操作系統中縮小瀏覽器的寬度來并排其它窗口。但到了今天和未來，2K、3.5K、4K 顯示器越來越普及，設計師是虛要考慮 1080P 以外的顯示怎么辦的。

設計自適應寬的界面，可以先選用一個合適的寬度作為基礎，如 1440px、1920px 等，給出模塊拉伸的方案，然后給出最小寬度效果、超出的應對的措施。要設計出切實可行的方案，是需要設計師完全熟悉 HTM5L+CSS3 和基礎 JS 的，還需要考慮過大的寬度適應下配圖的清晰度和讀取效率問題。空談自適應和響應式布局絕對是浪費團隊時間的做法。

三、結尾
還需要做一些說明的是，即使我們采用了定寬的模式，也可以在特定的模塊使用自適應模式進行組合的，常見的就是網頁的頭部和底部，還有部分帶有背景色、圖案的模塊。如上圖天貓的案例。、不要用太大的畫布進行設計。否則設計出來的演示稿會沒有觀賞性，對預覽效果大打折扣，比如看下面天貓頁面的截圖當成演示稿的話，肯定比上方那張大量留白的看起來順眼多了。

結論：
網頁設計師的目標就是在瀏覽器和開發語言的限制下找出合適的設計方案。如果沒有把握，請就使用 960/980px 的方案即可。如果要使用更寬的畫布，則一定要弄明白各項限制和緣由。

新聞標題：設計網頁時，如何規劃網頁的寬度？常見的寬度是多少像素？
文章出自：http://m.newbst.com/news29/159479.html

成都網站建設公司_創新互聯，為您提供響應式網站、面包屑導航、微信小程序、動態網站、網站收錄、外貿網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯