網(wǎng)頁設(shè)計(jì)中，寬度的設(shè)置，是沒有絕對固定的值的，根據(jù)我們的需求出發(fā)。這里我做個(gè)詳細(xì)的網(wǎng)頁寬度設(shè)置科普。

網(wǎng)頁的寬度主要分兩種：

定寬：內(nèi)容區(qū)域?qū)挾裙潭?br />自適應(yīng)：內(nèi)容區(qū)域?qū)挾雀S瀏覽器變化

一、定寬模式

定寬是我們?nèi)粘Ｗ畛Ｒ姷男问?，主流的寬度?960px / 980px / 1190px / 1210px/1200px/1400px 等。那么為什么會(huì)出現(xiàn)這幾個(gè)寬度，而不是我們想象中顯示器分辨率常見寬如 1024、1280 呢？

客戶端顯示器有一定局限性，在定義網(wǎng)頁寬度時(shí)，我們第一件事是考慮我們的受眾用的顯示器。大家都知道，顯示器基本都是從 1024px 起始的，即使今天這個(gè)分辨率的顯示設(shè)備已經(jīng)很稀有了（雖然ipad也使用這個(gè)規(guī)格），我們就要根據(jù)客觀條件考慮自己要支持最低的分辨率。

• 如為一些特定的企業(yè)設(shè)計(jì)web管理系統(tǒng)，應(yīng)用的設(shè)備統(tǒng)一是 1440px 寬以上的，那么我們就要按這個(gè)寬度作為設(shè)計(jì)的標(biāo)準(zhǔn)開始設(shè)計(jì)設(shè)計(jì)稿。
• 如果要設(shè)計(jì)一個(gè)面向年輕群體的潮牌官網(wǎng)，可能就會(huì)為了更好的展示效果放棄低分辨率的用戶（主要集中在中老年群體），最低按 1366 寬開始支持。

• 如果是設(shè)計(jì)像淘寶這樣的要滿足所有人的網(wǎng)站，那么就要從最低的 1024 開始支持。

假設(shè)我們確定了 1024 寬的支持起點(diǎn)，那就還要再做一件事，確定一個(gè)主內(nèi)容的區(qū)域?qū)挸鰜?。在我們使?Word 的時(shí)候，大家都知道我們會(huì)給 A4 紙面設(shè)置一種參數(shù)類型叫頁邊距，不會(huì)讓文字內(nèi)容直接貼在紙張邊緣上。同理，網(wǎng)頁主內(nèi)容的區(qū)域小于 1024 寬時(shí)，才能使左右產(chǎn)生留白。如知乎最小寬度下左右也會(huì)留出間距使內(nèi)容不會(huì)直接貼到瀏覽器上。

所以，要知道 960px、980px 以及類似淘寶、京東這個(gè)級別網(wǎng)站所使用的界面寬，都是經(jīng)過格線系統(tǒng)的體系推導(dǎo)而出的，而不是覺得某個(gè)整數(shù)看著比較順眼所以那么設(shè)置，即使你對柵格一點(diǎn)概念都沒有，也是可以使用這些寬度的。

最簡單的定寬長度設(shè)置： 寬度 = 支持最小寬度 - 左右留白

二、自適應(yīng)模式
可能很多人聽過，響應(yīng)式布局，尤其前幾年 H5 崛起的時(shí)候，很多初級網(wǎng)頁設(shè)計(jì)師都覺得，網(wǎng)頁設(shè)計(jì)以后就應(yīng)該支持全平臺(tái)，那些老的定寬規(guī)格都應(yīng)該被淘汰。但是，寬度自適應(yīng)模式和響應(yīng)式設(shè)計(jì)不是完全相等的。

響應(yīng)式設(shè)計(jì)，是在多種平臺(tái)下可以良好顯示和運(yùn)行的一種框架，在不同的寬度下展現(xiàn)出不同的排版和樣式。

在這里成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司不怎么推薦大家去使用響應(yīng)式設(shè)計(jì)，因?yàn)榫窒扌蕴?，?shí)際的項(xiàng)目開發(fā)時(shí)長可能還不如 PC、移動(dòng)端分別開制作。而一般自適應(yīng)寬模式，是讓主內(nèi)容區(qū)域可以隨畫布的拉伸而做調(diào)整，讓整個(gè)瀏覽器的畫布區(qū)域被大化利用，展示更多的文字信息或圖像，帶來更好的瀏覽體驗(yàn)（注：設(shè)計(jì)得好的情況下）。

在這種模式下，使用 1920px 或更大的寬來設(shè)計(jì)是沒問題的。但是，你還需要定義一個(gè)最小的寬，再出一版設(shè)計(jì)，來展示極限情況下的視覺效果。因?yàn)楹芏嘤脩魰?huì)在操作系統(tǒng)中縮小瀏覽器的寬度來并排其它窗口。但到了今天和未來，2K、3.5K、4K 顯示器越來越普及，設(shè)計(jì)師是虛要考慮 1080P 以外的顯示怎么辦的。

設(shè)計(jì)自適應(yīng)寬的界面，可以先選用一個(gè)合適的寬度作為基礎(chǔ)，如 1440px、1920px 等，給出模塊拉伸的方案，然后給出最小寬度效果、超出的應(yīng)對的措施。要設(shè)計(jì)出切實(shí)可行的方案，是需要設(shè)計(jì)師完全熟悉 HTM5L+CSS3 和基礎(chǔ) JS 的，還需要考慮過大的寬度適應(yīng)下配圖的清晰度和讀取效率問題?？照勛赃m應(yīng)和響應(yīng)式布局絕對是浪費(fèi)團(tuán)隊(duì)時(shí)間的做法。

三、結(jié)尾
還需要做一些說明的是，即使我們采用了定寬的模式，也可以在特定的模塊使用自適應(yīng)模式進(jìn)行組合的，常見的就是網(wǎng)頁的頭部和底部，還有部分帶有背景色、圖案的模塊。如上圖天貓的案例。、不要用太大的畫布進(jìn)行設(shè)計(jì)。否則設(shè)計(jì)出來的演示稿會(huì)沒有觀賞性，對預(yù)覽效果大打折扣，比如看下面天貓頁面的截圖當(dāng)成演示稿的話，肯定比上方那張大量留白的看起來順眼多了。

結(jié)論：
網(wǎng)頁設(shè)計(jì)師的目標(biāo)就是在瀏覽器和開發(fā)語言的限制下找出合適的設(shè)計(jì)方案。如果沒有把握，請就使用 960/980px 的方案即可。如果要使用更寬的畫布，則一定要弄明白各項(xiàng)限制和緣由。

新聞標(biāo)題：設(shè)計(jì)網(wǎng)頁時(shí)，如何規(guī)劃網(wǎng)頁的寬度？常見的寬度是多少像素？
文章出自：http://m.rwnh.cn/news29/159479.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、微信小程序、動(dòng)態(tài)網(wǎng)站、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)

廣告

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