建站
咨詢
售后
建站咨詢
新聞中心
網(wǎng)頁的寬度主要分兩種：
定寬：內(nèi)容區(qū)域?qū)挾裙潭?br/>自適應(yīng)：內(nèi)容區(qū)域?qū)挾雀S瀏覽器變化
一、定寬模式
定寬是我們?nèi)粘Ｗ畛Ｒ姷男问剑髁鞯膶挾扔?60px/980px/1190px/1210px/1200px/1400px等。那么為什么會出現(xiàn)這幾個寬度，而不是我們想象中顯示器分辨率常見寬如1024、1280呢？
創(chuàng)新互聯(lián)公司，是成都地區(qū)的互聯(lián)網(wǎng)解決方案提供商，用心服務(wù)為企業(yè)提供網(wǎng)站建設(shè)、成都APP應(yīng)用開發(fā)、重慶小程序開發(fā)公司、系統(tǒng)定制網(wǎng)站和微信代運營服務(wù)。經(jīng)過數(shù)十載的沉淀與積累，沉淀的是技術(shù)和服務(wù)，讓客戶少走彎路，踏實做事，誠實做人，用情服務(wù)，致力做一個負責(zé)任、受尊敬的企業(yè)。對客戶負責(zé)，就是對自己負責(zé)，對企業(yè)負責(zé)。
客戶端顯示器有一定局限性，在定義網(wǎng)頁寬度時，我們第一件事是考慮我們的受眾用的顯示器。大家都知道，顯示器基本都是從1024px起始的，即使今天這個分辨率的顯示設(shè)備已經(jīng)很稀有了（雖然ipad也使用這個規(guī)格），我們就要根據(jù)客觀條件考慮自己要支持最低的分辨率。
如為一些特定的企業(yè)設(shè)計web管理系統(tǒng)，應(yīng)用的設(shè)備統(tǒng)一是1440px寬以上的，那么我們就要按這個寬度作為設(shè)計的標(biāo)準(zhǔn)開始設(shè)計設(shè)計稿。 如果要設(shè)計一個面向年輕群體的潮牌官網(wǎng)，可能就會為了更好的展示效果放棄低分辨率的用戶（主要集中在中老年群體），最低按1366寬開始支持。 如果是設(shè)計像淘寶這樣的要滿足所有人的網(wǎng)站，那么就要從最低的1024開始支持。 假設(shè)我們確定了1024寬的支持起點，那就還要再做一件事，確定一個主內(nèi)容的區(qū)域?qū)挸鰜怼Ｔ谖覀兪褂肳ord的時候，大家都知道我們會給A4紙面設(shè)置一種參數(shù)類型叫頁邊距，不會讓文字內(nèi)容直接貼在紙張邊緣上。同理，網(wǎng)頁主內(nèi)容的區(qū)域小于1024寬時，才能使左右產(chǎn)生留白。如知乎最小寬度下左右也會留出間距使內(nèi)容不會直接貼到瀏覽器上。所以，要知道960px、980px以及類似淘寶、京東這個級別網(wǎng)站所使用的界面寬，都是經(jīng)過格線系統(tǒng)的體系推導(dǎo)而出的，而不是覺得某個整數(shù)看著比較順眼所以那么設(shè)置，即使你對柵格一點概念都沒有，也是可以使用這些寬度的。
最簡單的定寬長度設(shè)置：寬度=支持最小寬度-左右留白
二、自適應(yīng)模式
可能很多人聽過，響應(yīng)式布局，尤其前幾年H5崛起的時候，很多初級網(wǎng)頁設(shè)計師都覺得，網(wǎng)頁設(shè)計以后就應(yīng)該支持全平臺，那些老的定寬規(guī)格都應(yīng)該被淘汰。但是，寬度自適應(yīng)模式和響應(yīng)式設(shè)計不是完全相等的。
響應(yīng)式設(shè)計，是在多種平臺下可以良好顯示和運行的一種框架，在不同的寬度下展現(xiàn)出不同的排版和樣式。
在這里創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司不怎么推薦大家去使用響應(yīng)式設(shè)計，因為局限性太大，實際的項目開發(fā)時長可能還不如PC、移動端分別開制作。而一般自適應(yīng)寬模式，是讓主內(nèi)容區(qū)域可以隨畫布的拉伸而做調(diào)整，讓整個瀏覽器的畫布區(qū)域被最大化利用，展示更多的文字信息或圖像，帶來更好的瀏覽體驗（注：設(shè)計得好的情況下）。
在這種模式下，使用1920px或更大的寬來設(shè)計是沒問題的。但是，你還需要定義一個最小的寬，再出一版設(shè)計，來展示極限情況下的視覺效果。因為很多用戶會在操作系統(tǒng)中縮小瀏覽器的寬度來并排其它窗口。但到了今天和未來，2K、3.5K、4K顯示器越來越普及，設(shè)計師是虛要考慮1080P以外的顯示怎么辦的。設(shè)計自適應(yīng)寬的界面，可以先選用一個合適的寬度作為基礎(chǔ)，如1440px、1920px等，給出模塊拉伸的方案，然后給出最小寬度效果、超出的應(yīng)對的措施。要設(shè)計出切實可行的方案，是需要設(shè)計師完全熟悉HTM5L+CSS3和基礎(chǔ)JS的，還需要考慮過大的寬度適應(yīng)下配圖的清晰度和讀取效率問題?？照勛赃m應(yīng)和響應(yīng)式布局絕對是浪費團隊時間的做法。
三、結(jié)尾
還需要做一些說明的是，即使我們采用了定寬的模式，也可以在特定的模塊使用自適應(yīng)模式進行組合的，常見的就是網(wǎng)頁的頭部和底部，還有部分帶有背景色、圖案的模塊。如上圖天貓的案例。、不要用太大的畫布進行設(shè)計。否則設(shè)計出來的演示稿會沒有觀賞性，對預(yù)覽效果大打折扣，比如看下面天貓頁面的截圖當(dāng)成演示稿的話，肯定比上方那張大量留白的看起來順眼多了。
結(jié)論：
網(wǎng)頁設(shè)計師的目標(biāo)就是在瀏覽器和開發(fā)語言的限制下找出合適的設(shè)計方案。如果沒有把握，請就使用960/980px的方案即可。如果要使用更寬的畫布，則一定要弄明白各項限制和緣由。
文章標(biāo)題：設(shè)計網(wǎng)頁時，如何規(guī)劃網(wǎng)頁的寬度常見的寬度是多少像素
URL標(biāo)題：http://www.dlmjj.cn/article/eschje.html
