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

網頁的寬度主要分兩種：

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

一、定寬模式

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

創(chuàng)新互聯(lián)公司，是成都地區(qū)的互聯(lián)網解決方案提供商，用心服務為企業(yè)提供網站建設、成都APP應用開發(fā)、重慶小程序開發(fā)公司、系統(tǒng)定制網站和微信代運營服務。經過數十載的沉淀與積累，沉淀的是技術和服務，讓客戶少走彎路，踏實做事，誠實做人，用情服務，致力做一個負責任、受尊敬的企業(yè)。對客戶負責，就是對自己負責，對企業(yè)負責。

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

如為一些特定的企業(yè)設計web管理系統(tǒng)，應用的設備統(tǒng)一是1440px寬以上的，那么我們就要按這個寬度作為設計的標準開始設計設計稿。 如果要設計一個面向年輕群體的潮牌官網，可能就會為了更好的展示效果放棄低分辨率的用戶（主要集中在中老年群體），最低按1366寬開始支持。 如果是設計像淘寶這樣的要滿足所有人的網站，那么就要從最低的1024開始支持。 假設我們確定了1024寬的支持起點，那就還要再做一件事，確定一個主內容的區(qū)域寬出來。在我們使用Word的時候，大家都知道我們會給A4紙面設置一種參數類型叫頁邊距，不會讓文字內容直接貼在紙張邊緣上。同理，網頁主內容的區(qū)域小于1024寬時，才能使左右產生留白。如知乎最小寬度下左右也會留出間距使內容不會直接貼到瀏覽器上。

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

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

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

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

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

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

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

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

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

名稱欄目：設計網頁時，如何規(guī)劃網頁的寬度常見的寬度是多少像素
網站URL：http://aaarwkj.com/article24/eschje.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供商城網站、網站改版、外貿建站、網站維護、全網營銷推廣、企業(yè)建站

廣告

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