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

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

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

一、定寬模式

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

客戶(hù)端顯示器有一定局限性，在定義網(wǎng)頁(yè)寬度時(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)開(kāi)始設(shè)計(jì)設(shè)計(jì)稿。
• 如果要設(shè)計(jì)一個(gè)面向年輕群體的潮牌官網(wǎng)，可能就會(huì)為了更好的展示效果放棄低分辨率的用戶(hù)（主要集中在中老年群體），最低按 1366 寬開(kāi)始支持。

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

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

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

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

二、自適應(yīng)模式
可能很多人聽(tīng)過(guò)，響應(yīng)式布局，尤其前幾年 H5 崛起的時(shí)候，很多初級(jí)網(wǎng)頁(yè)設(shè)計(jì)師都覺(jué)得，網(wǎng)頁(yè)設(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)目開(kāi)發(fā)時(shí)長(zhǎng)可能還不如 PC、移動(dòng)端分別開(kāi)制作。而一般自適應(yīng)寬模式，是讓主內(nèi)容區(qū)域可以隨畫(huà)布的拉伸而做調(diào)整，讓整個(gè)瀏覽器的畫(huà)布區(qū)域被大化利用，展示更多的文字信息或圖像，帶來(lái)更好的瀏覽體驗(yàn)（注：設(shè)計(jì)得好的情況下）。

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

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

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

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

新聞標(biāo)題：設(shè)計(jì)網(wǎng)頁(yè)時(shí)，如何規(guī)劃網(wǎng)頁(yè)的寬度？常見(jiàn)的寬度是多少像素？
文章出自：http://vcdvsql.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)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)