PC端的設計對于很多從事UI行業(yè)的新人來說是個充滿未知的領域，對于基本的畫布創(chuàng)建、規(guī)格設置，都處于兩眼一抹黑的狀態(tài)，很多設計師在創(chuàng)建畫布的時候，就已經是第一個困擾的問題了。

特別是我們在網上找相關的問題時，得到的結果有很多種版本，而真的開發(fā)實現(xiàn)時又會遇到很多的問題，這也使我們更加的迷茫。其實對于網頁設計的寬度設置是沒有絕對固定的值，是根據(jù)我們需求出發(fā)的。

網頁的寬度主要分為兩種：定寬：內容區(qū)域寬度固定；自適應：內容區(qū)域寬度跟隨瀏覽器變化。

一、定寬模式

定寬是我們在看到的大部分網頁中最常見的一種形式，寬度分別由：960px、980px、1190px、1210px，有人看到這里可能會有疑問，我們平時做的設計稿不是1024px、1280px、1366px嗎？

在定義網頁寬度時，我們第一件事是考慮我們的受眾用的顯示器。

1、顯示器設備

在定義網頁寬度時，我們第一件事是考慮我們的受眾用的顯示器。顯示器基本都是從 1024px 起始的，雖然這個分辨率的顯示設備已經不多了（雖然我們公司就有很多，都是正方形的），我們就要根據(jù)客觀條件考慮自己要支持最低的分辨率。

比如說現(xiàn)在常見的PC分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080，目前來說設備中使用率最多的是1920的，如下圖所示：

那么我們是不是在設計的時候用1920款的就可以呢？當然不是。

以我的工作經驗來說，剛剛有講到我們公司還是大量使用著1024px的電腦，所以在定義網頁寬度的時候，這是要考慮第一個因素，雖然這樣的設備在市面上已經很少見了，但是我們設計的時候就要以1024px的畫板來畫界面。

因為在業(yè)務正常使用的時候，顯示器分辨率如果小于畫布，內容就會顯示不全，這讓需要每天查看數(shù)據(jù)的業(yè)務看到顯示不全的網頁，這會非常難受的，比如說下圖中的網頁：

在1024px的情況下，頁面就是顯示不全的，同理就相當于你為業(yè)務設計的網頁，卻并沒有考慮到他們的使用體驗，所以我們在考慮設計網頁尺寸的時候，實際要考慮的是我們用戶顯示器，而不是大部分設計師用多大的尺寸。

比如說上圖中的UI中國、站酷，由于兩個的網站受眾群體都是互聯(lián)網設計，而這類人群的設備性能都相對比較不錯，所以他們網站最低的滿足設備都是1366px起的。

一些企業(yè)設計的web管理系統(tǒng)，應用的設備統(tǒng)一大概率都是 1440px 寬以上的，所以我們在網上能夠找到的Alipay和element的設計組件，設備大小是1440寬以上的。

還有一些面向人群比較多的網站，比如淘寶、京東等，由于受眾群體跨度大，因此他的設備就要滿足所有設備，從最低的1024開始支持。

以我們公司的網頁設計為例，在確定了1024寬為設計尺寸，接下來要做就是確定主內容的區(qū)域寬出來，我之前遇到的很常見的問題就是兩邊沒有留白，內容會直接貼邊，但是我們看一下大部分的網站，在縮小的區(qū)域小于1024寬時，左右會產生留白，如下圖所示：

這個內容邊距要怎么定義呢，下面我們就來講到。

2、定義內容區(qū)域

定義內容區(qū)域有兩種辦法，一種是用柵格：（ W =（a×n）+（n-1）i ）得到嚴謹實用的內容寬， 如下圖所示：

這個做法就是通過將內容區(qū)域劃分成若干內容塊和間隔模塊的方式，輔助我們排版。在本篇內容里不做具體介紹，只需要關注結果即可。

如果選擇適配 1280px，那么設計內容的區(qū)域寬通常為 1180、1190。而在適配 1024px下，那么內容區(qū)域寬常見的就有 950、970、990 等。當我們創(chuàng)建完完整分辨率的畫布，再通過參考線的方式將內容區(qū)域規(guī)劃出來即可，如下圖所示：

關于柵格化今天就不贅述了，有興趣的可以看看這篇關于柵格的文章。

當然如果大家覺得復雜，我們可以使用第二種方法也是最簡單的方式：寬度 = 支持最小寬度 - 左右留白。

這里就得到開頭所說的，為什么常見的網頁寬度分別為：960px、980px、1190px、1210px了。

二、自適應模式

說完了定寬的模式，我們再來說說自適應模式，這個分為兩種：響應式網站和自適應網站，首先我們先來說說說自適應的網站。

1、自適應網站

它是根據(jù)你使用的訪問設備來自動調教分辨率使得你看的頁面相同，目的在于為了符合訪客的瀏覽。如下圖所示：

2、響應式網站

是一個能夠兼容多個終端的網站，不是為每一個終端做一個特定版本的網站。通俗的說，就是做一個網站能夠適應多種設備，而不用為每個設備做一個特定的版本，并且在不同的設備上展示的模式也會不一樣，能夠為用戶提供更舒適的界面和更好的瀏覽體驗。

3、如何選擇

響應式網站較為簡單，設計師只要畫一個界面就可以了，布局可以通過設定來自行調整。

而自適應網站設計師者要做兩套或者多套不同的網頁界面，以滿足所有市場用戶，比如說手機端可能就要重新設計了。

但是響應式的網站只適合比較簡單的風格，面對一些比較復雜的框架結構就比較難以實現(xiàn)了，由于局限性比較大，實際項目的開發(fā)市場可能還不如自適應的網站，自適應往往就考慮幾種狀態(tài)，不需要長期考慮網站建設大小問題，因此你會發(fā)現(xiàn)自適應比響應式會更符合企業(yè)建站需求。

劃重點

決定我們設計尺寸是取決于我們的主要受眾用戶，而不是茫然的跟著別的設計師，還要考慮到適配等等問題，雖然是最基礎簡單的尺寸，也藏著很多的知識點。