1.屏幕分辨率寬度

我們只看PC端，根據(jù)當(dāng)前屏幕尺寸的分布統(tǒng)計(jì)（下圖是百度流量研究所最新數(shù)據(jù)）

在建站過(guò)程中，大部分屏幕的分辨率都超過(guò)了1366*768。這是屏幕越來(lái)越大的趨勢(shì)。幾年前，我們還需要考慮非常常見的1024*768分辨率下的顯示效果。無(wú)需單獨(dú)處理。

此分辨率值只是一個(gè)上限參考值。你不能把頁(yè)面的實(shí)際顯示內(nèi)容區(qū)域（或安全區(qū)域）取到這個(gè)值，因?yàn)樵赪indows等一些瀏覽器上，滾動(dòng)條也占了寬度，同時(shí)又被過(guò)度粘貼了。設(shè)計(jì)上不建議使用邊緣。

2. 柵格與響應(yīng)式設(shè)計(jì)

這里需要理解一個(gè)概念，通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格，并在柵格間增加通用間距來(lái)處理絕大多數(shù)情況下的垂直排列問(wèn)題，12或24的好處是能夠被2、3、4整除，更方便來(lái)處理2：1，1：2：1等常見間距。

計(jì)算方式（我這里常見的是處理企業(yè)級(jí)的設(shè)計(jì)頁(yè)面）

到這里基本上就知道為什么我們常見的值會(huì)是1180（1200減去兩邊柵格的留白）。這個(gè)值叫做典型設(shè)計(jì)參照，以往的設(shè)計(jì)平面稿是沒(méi)辦法動(dòng)態(tài)適配各種寬度的，用典型值來(lái)作為設(shè)計(jì)稿基準(zhǔn)尺寸能夠表達(dá)典型效果，并在頁(yè)面實(shí)現(xiàn)時(shí)更容易還原。

響應(yīng)式布局是最近幾年比較流行的概念，在網(wǎng)頁(yè)渲染時(shí)，能夠根據(jù)視窗寬度自動(dòng)對(duì) Layout 及頁(yè)面元素進(jìn)行重新排列。比較常見的 Bootstrap 響應(yīng)式部分的介紹：

以及柵格部分的詳細(xì)描述：

下面這張圖給出了 Bootstrap 的常見屏幕狀態(tài)下的幾個(gè)典型值：

關(guān)于網(wǎng)頁(yè)字體大小等問(wèn)題，也可以參考上面比較經(jīng)典的設(shè)計(jì)規(guī)范約定。常見的內(nèi)容段落文字大小約定為 14px。我這邊在做的規(guī)范，關(guān)于排版的約定如下：

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對(duì)比，一定讓您多一份收獲！