網(wǎng)頁寬度到底該怎么定？

首先，網(wǎng)頁設(shè)計(jì)的第一步就是畫布創(chuàng)建了，這也是困擾我們的第一個(gè)難題。由于市面上存在多種前端技術(shù)的應(yīng)用，以及一些歷史遺留問題、設(shè)計(jì)場(chǎng)景差異等因素的影響，我們?cè)谒阉鳌妇W(wǎng)頁設(shè)計(jì)寬度」這類問題的時(shí)候，得到的結(jié)果會(huì)有非常多的版本，導(dǎo)致更加迷茫。所以，了解網(wǎng)頁設(shè)計(jì)的寬度定義，勢(shì)必要理解它們的底層原因，因?yàn)閷挾鹊脑O(shè)置：只有合適的寬度，沒有絕對(duì)正確的寬度。對(duì)于任何網(wǎng)頁設(shè)計(jì)的項(xiàng)目，寬度設(shè)定的標(biāo)準(zhǔn)都是不同的，而在選擇寬度的過程里，需要考慮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)頁用戶所使用的屏幕類型，主要考量的標(biāo)準(zhǔn)是屏幕的分辨率（長(zhǎng)寬像素?cái)?shù)）。常見的PC屏幕分辨率有1280×800、1600×900、1440×800、1366×768、1920×1080、2560×1440等，再加上一些更加不常見的（比如surfacebook的3000×2000），可以列出數(shù)十種，這是大家都已經(jīng)知道的事情。所以基于這個(gè)前提，很多人會(huì)去查找關(guān)于屏幕使用分辨率的統(tǒng)計(jì)表格，比如下圖這種，然后得出最常用的分辨率是1080P。有了數(shù)據(jù)支撐，我們不就可以開始動(dòng)手設(shè)計(jì)了？

實(shí)際上這個(gè)做法是錯(cuò)誤的。對(duì)于網(wǎng)頁設(shè)計(jì)來說，我們首先應(yīng)該確定的是──最小適配屏幕。因?yàn)樵谝话銏?chǎng)景下，顯示器分辨率如果大于畫布，內(nèi)容可以被我們正常訪問；如果小于畫布，內(nèi)容就會(huì)顯示不全，相當(dāng)于低于這個(gè)分辨率設(shè)備的用戶被我們放棄了。

所以，做個(gè)簡(jiǎn)單的計(jì)算，如果以1920×1080為基礎(chǔ)，則支持的用戶數(shù)為27.38%；如果是800×600，則支持用戶數(shù)低于3%。這么考慮的話，我們是不是只要支持最小的分辨率即可？當(dāng)然也不是。在今天，1024以下寬度的設(shè)備已經(jīng)非常稀少，即便是1024本身，主流的設(shè)備也是平板而不是一般的PC電腦。當(dāng)這些設(shè)備的數(shù)量低到成為絕對(duì)的非主流時(shí)，是可以選擇忽略它們，以滿足更多人的需要。所以通常，我們最低支持的分辨率，不是1024×768就是1280×800。如果大家不相信，可以去各類網(wǎng)站中，用QQ截圖工具量一下主要內(nèi)容區(qū)域的寬度，很難出現(xiàn)大于這兩個(gè)數(shù)字的情況。

2.展示類型展示類型，也只有兩點(diǎn)，即寬度適應(yīng)屏幕，或者是定寬。先說說第一種，可能有不少人已經(jīng)聽過響應(yīng)式布局和自適應(yīng)設(shè)計(jì)的大名，先不論它們有什么區(qū)別，它們代表了網(wǎng)頁顯示內(nèi)容隨瀏覽器窗口尺寸變化而變化的技術(shù)，比如使用Bootstrap架構(gòu)的星巴克官網(wǎng)，更改瀏覽器窗口寬度后，可以得到以下不同的結(jié)果。

如果你現(xiàn)在還需要通過這篇內(nèi)容學(xué)習(xí)網(wǎng)頁寬度制定的情況下，我是不建議在真實(shí)項(xiàng)目中使用這種展示類型的。因?yàn)樗鼈兌夹枰獙?duì)前端架構(gòu)有一定的熟悉，以及對(duì)CSS的屬性特性有基本認(rèn)識(shí)，否則就無法在設(shè)計(jì)過程中直接考慮到其它分辨率下顯示的效果，以及制定不同元素的自適應(yīng)方式。響應(yīng)式設(shè)計(jì)的規(guī)則非常靈活，會(huì)受到更多因素的影響，完整的響應(yīng)式界面設(shè)計(jì)會(huì)如上圖所示，提供多種尺寸的設(shè)計(jì)圖。常見的如1920、1080、640寬。如果是定寬的設(shè)計(jì)，那么就回到前面所說，我們只需要以適配1280或1024的屏幕展開設(shè)計(jì)即可。但是，網(wǎng)頁的實(shí)際內(nèi)容區(qū)域，和我們要適配的范圍是不同的。在瀏覽器中，首先有右側(cè)滾動(dòng)條的因素影響，并且主體內(nèi)容的兩側(cè)也要預(yù)留出內(nèi)邊距。

所以，我們真正創(chuàng)建的網(wǎng)頁內(nèi)容區(qū)域，是小于1280或者1024地。而得出具體的內(nèi)容區(qū)域尺寸的方法，是通過網(wǎng)頁的刪格系統(tǒng)計(jì)算出來的。網(wǎng)頁刪格系統(tǒng)是由平面網(wǎng)格系統(tǒng)衍生出來，針對(duì)網(wǎng)頁使用的排版系統(tǒng)。如果稍微看過這類文章的同學(xué)都會(huì)看見一個(gè)公式：（Axn）-i=W

這個(gè)做法就是通過將內(nèi)容區(qū)域劃分成若干內(nèi)容塊和間隔模塊的方式，輔助我們排版。在本篇內(nèi)容里不做具體介紹，只需要關(guān)注結(jié)果即可。如果選擇適配1280，那么設(shè)計(jì)內(nèi)容的區(qū)域?qū)捦ǔ?180、1190。而在適配1024下，那么內(nèi)容區(qū)域?qū)挸Ｒ姷木陀?50、970、990等。當(dāng)我們創(chuàng)建完完整分辨率的畫布，再通過參考線的方式將內(nèi)容區(qū)域規(guī)劃出來即可。

對(duì)于網(wǎng)頁設(shè)計(jì)來說，最重要的參數(shù)就是內(nèi)容區(qū)域的寬度，但也有一些元素是例外，很多人可能發(fā)現(xiàn)網(wǎng)頁有一些元素是超過正常的內(nèi)容區(qū)域的（無論是對(duì)一般顯示模式或是自適應(yīng)模式），最常見的就是頂部的導(dǎo)航欄和底部的頁腳區(qū)域。比如打開淘寶無論拉伸得多長(zhǎng)，內(nèi)容區(qū)域固定是1190寬，而導(dǎo)航欄卻永遠(yuǎn)撐滿整個(gè)瀏覽器。

所以，我們不會(huì)將這些內(nèi)容的寬度計(jì)算在內(nèi)，在設(shè)計(jì)稿中只要設(shè)計(jì)了這樣的元素，和前端人員適當(dāng)溝通和標(biāo)注，就可以獲得想要的效果。

當(dāng)前題目：網(wǎng)頁寬度到底該怎么定？
網(wǎng)站URL：http://www.muchs.cn/news39/32789.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、手機(jī)網(wǎng)站建設(shè)、域名注冊(cè)

廣告

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