在深圳地區(qū)擁有十多年企業(yè)網(wǎng)站建設(shè)經(jīng)驗(yàn)的國(guó)人偉業(yè)為大家分享以下關(guān)于企業(yè)網(wǎng)站建設(shè)中如何使用各種不同寬度的設(shè)計(jì)技巧：

展示類型，也只有兩點(diǎn)，即寬度適應(yīng)屏幕，或者是定寬。

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

如果你現(xiàn)在還需要通過這篇內(nèi)容學(xué)習(xí)網(wǎng)頁(yè)寬度制定的情況下，我是不建議在真實(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)頁(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ū)域尺寸的方法，是通過網(wǎng)頁(yè)的刪格系統(tǒng)計(jì)算出來的。

（Axn）- i = W

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

如果選擇適配 1280，那么設(shè)計(jì)內(nèi)容的區(qū)域?qū)捦ǔ?1180、1190。而在適配 1024 下，那么內(nèi)容區(qū)域?qū)挸Ｒ姷木陀?950、970、990 等。當(dāng)我們創(chuàng)建完完整分辨率的畫布，再通過參考線的方式將內(nèi)容區(qū)域規(guī)劃出來即可。

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說，最重要的參數(shù)就是內(nèi)容區(qū)域的寬度，但也有一些元素是例外，很多人可能發(fā)現(xiàn)網(wǎng)頁(yè)有一些元素是超過正常的內(nèi)容區(qū)域的（無論是對(duì)一般顯示模式或是自適應(yīng)模式），最常見的就是頂部的導(dǎo)航欄和底部的頁(yè)腳區(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)注，就可以獲得想要的效果。

本文地址：http://www.gknaturalcreations.com/qiyewangzhanjianshe/27-195.html

本文部分文字或圖片信息來自互聯(lián)網(wǎng)網(wǎng)絡(luò)整理，如有侵權(quán)信息請(qǐng)及時(shí)聯(lián)系我司處理。