了解網(wǎng)頁(yè)設(shè)計(jì)的寬度定義颊乘，勢(shì)必要理解它們的底層原因参淹，因?yàn)閷挾鹊脑O(shè)置：只有合適的寬度，沒(méi)有絕對(duì)正確的寬度乏悄。
對(duì)于任何網(wǎng)頁(yè)設(shè)計(jì)的項(xiàng)目承二，寬度設(shè)定的標(biāo)準(zhǔn)都是不同的，而在選擇寬度的過(guò)程里纲爸，需要考慮 2 個(gè)核心因素：
1. 設(shè)備因素
設(shè)備因素即確認(rèn)項(xiàng)目主要展示的屏幕設(shè)備是哪一種亥鸠，它們對(duì)應(yīng)的分辨率是多少。最粗略的劃分，可以將設(shè)備劃分成 PC 端和移動(dòng)端负蚊。這兩者受制與顯示的尺寸神妹，系統(tǒng)的限制，在設(shè)計(jì)和操作上都有比較大的區(qū)別家妆。
瀏覽設(shè)備
瀏覽設(shè)備即網(wǎng)頁(yè)用戶(hù)所使用的屏幕類(lèi)型鸵荠，主要考量的標(biāo)準(zhǔn)是屏幕的分辨率（長(zhǎng)寬像素?cái)?shù)）。常見(jiàn)的 PC 屏幕分辨率有 1280×800伤极、1600×900蛹找、1440×800、1366×768哨坪、1920×1080庸疾、2560×1440 等，再加上一些更加不常見(jiàn)的（比如 surfacebook 的 3000×2000）当编，可以列出數(shù)十種届慈，這是大家都已經(jīng)知道的事情。
所以基于這個(gè)前提忿偷，很多人會(huì)去查找關(guān)于屏幕使用分辨率的統(tǒng)計(jì)表格金顿，比如下圖這種，然后得出最常用的分辨率是 1080P鲤桥。有了數(shù)據(jù)支撐揍拆，我們不就可以開(kāi)始動(dòng)手設(shè)計(jì)了？
實(shí)際上這個(gè)做法是錯(cuò)誤的茶凳。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)嫂拴，我們首先應(yīng)該確定的是──最小適配屏幕。
因?yàn)樵谝话銏?chǎng)景下慧妄，顯示器分辨率如果大于畫(huà)布顷牌，內(nèi)容可以被我們正常訪問(wèn)剪芍；如果小于畫(huà)布塞淹，內(nèi)容就會(huì)顯示不全，相當(dāng)于低于這個(gè)分辨率設(shè)備的用戶(hù)被我們放棄了罪裹。
所以饱普，做個(gè)簡(jiǎn)單的計(jì)算，如果以 1920×1080 為基礎(chǔ)状共，則支持的用戶(hù)數(shù)為 27.38 %套耕；如果是 800×600，則支持用戶(hù)數(shù)低于 3%峡继。
這么考慮的話冯袍，我們是不是只要支持最小的分辨率即可？當(dāng)然也不是。
在今天康愤，1024 以下寬度的設(shè)備已經(jīng)非常稀少儡循，即便是 1024 本身，主流的設(shè)備也是平板而不是一般的 PC 電腦征冷。當(dāng)這些設(shè)備的數(shù)量低到成為絕對(duì)的非主流時(shí)择膝，是可以選擇忽略它們，以滿(mǎn)足更多人的需要检激。
所以通常肴捉，我們最低支持的分辨率，不是 1024×768 就是 1280×800叔收。如果大家不相信齿穗，可以去各類(lèi)網(wǎng)站中，用 QQ 截圖工具量一下主要內(nèi)容區(qū)域的寬度今穿，很難出現(xiàn)大于這兩個(gè)數(shù)值的情況缤灵。
2. 展示類(lèi)型
展示類(lèi)型，也只有兩點(diǎn)蓝晒，即寬度適應(yīng)屏幕腮出，或者是定寬。
先說(shuō)說(shuō)第一種芝薇，可能有不少人已經(jīng)聽(tīng)過(guò)響應(yīng)式布局和自適應(yīng)設(shè)計(jì)的大名胚嘲，先不論它們有什么區(qū)別，它們代表了網(wǎng)頁(yè)顯示內(nèi)容隨瀏覽器窗口尺寸變化而變化的技術(shù)洛二，比如使用 Bootstrap 架構(gòu)的星巴克官網(wǎng)馋劈，更改瀏覽器窗口寬度后，可以得到以下不同的結(jié)果晾嘶。
如果你現(xiàn)在還需要通過(guò)這篇內(nèi)容學(xué)習(xí)網(wǎng)頁(yè)寬度制定的情況下妓雾，我是不建議在真實(shí)項(xiàng)目中使用這種展示類(lèi)型的。因?yàn)樗鼈兌夹枰獙?duì)前端架構(gòu)有一定的熟悉垒迂，以及對(duì) CSS 的屬性特性有基本認(rèn)識(shí)械姻，否則就無(wú)法在設(shè)計(jì)過(guò)程中直接考慮到其它分辨率下顯示的效果，以及制定不同元素的自適應(yīng)方式机断。
響應(yīng)式設(shè)計(jì)的規(guī)則非常靈活楷拳，會(huì)受到更多因素的影響，完整的響應(yīng)式界面設(shè)計(jì)會(huì)如上圖所示吏奸，提供多種尺寸的設(shè)計(jì)圖欢揖。常見(jiàn)的如 1920、1080奋蔚、640 寬她混。
如果是定寬的設(shè)計(jì)烈钞，那么就回到前面所說(shuō)，我們只需要以適配 1280 或 1024 的屏幕展開(kāi)設(shè)計(jì)即可坤按。但是棵磷，網(wǎng)頁(yè)的實(shí)際內(nèi)容區(qū)域，和我們要適配的范圍是不同的晋涣。
在瀏覽器中仪媒，首先有右側(cè)滾動(dòng)條的因素影響，并且主體內(nèi)容的兩側(cè)也要預(yù)留出內(nèi)邊距谢鹊。
所以算吩，我們真正創(chuàng)建的網(wǎng)頁(yè)內(nèi)容區(qū)域，是小于 1280 或者 1024 的佃扼。而得出具體的內(nèi)容區(qū)域尺寸的方法偎巢，是通過(guò)網(wǎng)頁(yè)的刪格系統(tǒng)計(jì)算出來(lái)的。
網(wǎng)頁(yè)刪格系統(tǒng)是由平面網(wǎng)格系統(tǒng)衍生出來(lái)兼耀，針對(duì)網(wǎng)頁(yè)使用的排版系統(tǒng)压昼。如果稍微看過(guò)這類(lèi)文章的同學(xué)都會(huì)看見(jiàn)一個(gè)公式：
（Axn）- i = W
這個(gè)做法就是通過(guò)將內(nèi)容區(qū)域劃分成若干內(nèi)容塊和間隔模塊的方式，輔助我們排版瘤运。在本篇內(nèi)容里不做具體介紹窍霞，只需要關(guān)注結(jié)果即可。
如果選擇適配 1280拯坟，那么設(shè)計(jì)內(nèi)容的區(qū)域?qū)捦ǔ?1180但金、1190。而在適配 1024 下郁季，那么內(nèi)容區(qū)域?qū)挸Ｒ?jiàn)的就有 950冷溃、970、990 等梦裂。當(dāng)我們創(chuàng)建完完整分辨率的畫(huà)布似枕，再通過(guò)參考線的方式將內(nèi)容區(qū)域規(guī)劃出來(lái)即可。
對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)年柠，最重要的參數(shù)就是內(nèi)容區(qū)域的寬度凿歼，但也有一些元素是例外，很多人可能發(fā)現(xiàn)網(wǎng)頁(yè)有一些元素是超過(guò)正常的內(nèi)容區(qū)域的（無(wú)論是對(duì)一般顯示模式或是自適應(yīng)模式）彪杉，最常見(jiàn)的就是頂部的導(dǎo)航欄和底部的頁(yè)腳區(qū)域毅往。比如打開(kāi)淘寶無(wú)論拉伸得多長(zhǎng)牵咙，內(nèi)容區(qū)域固定是 1190 寬派近，而導(dǎo)航欄卻永遠(yuǎn)撐滿(mǎn)整個(gè)瀏覽器。
所以洁桌，我們不會(huì)將這些內(nèi)容的寬度計(jì)算在內(nèi)渴丸，在設(shè)計(jì)稿中只要設(shè)計(jì)了這樣的元素，和前端人員適當(dāng)溝通和標(biāo)注，就可以獲得想要的效果谱轨。
總結(jié)
其實(shí)講了一堆戒幔，最后我們用一個(gè)表格來(lái)總結(jié)一下。
