更新時間：2025-06-08 14:42:39
網站建設
4231.屏幕分辨率寬度
我們只看PC端，根據當前屏幕尺寸的分布統計（下圖是百度流量研究所最新數據）
在建站過程中，大部分屏幕的分辨率都超過了1366*768。這是屏幕越來越大的趨勢。幾年前，我們還需要考慮非常常見的1024*768分辨率下的顯示效果。無需單獨處理。
此分辨率值只是一個上限參考值。你不能把頁面的實際顯示內容區域（或安全區域）取到這個值，因為在Windows等一些瀏覽器上，滾動條也占了寬度，同時又被過度粘貼了。設計上不建議使用邊緣。
tyle="font-family:Calibri,sans-serif">理解了這個我們就能清楚的知道一個基準值的參考范圍。2. 柵格與響應式設計
這里需要理解一個概念，通常為了布局方便我們將內容區域劃分為12或者24格，并在柵格間增加通用間距來處理絕大多數情況下的垂直排列問題，12或24的好處是能夠被2、3、4整除，更方便來處理2：1，1：2：1等常見間距。
計算方式（我這里常見的是處理企業級的設計頁面）
到這里基本上就知道為什么我們常見的值會是1180（1200減去兩邊柵格的留白）。這個值叫做典型設計參照，以往的設計平面稿是沒辦法動態適配各種寬度的，用典型值來作為設計稿基準尺寸能夠表達典型效果，并在頁面實現時更容易還原。
響應式布局是最近幾年比較流行的概念，在網頁渲染時，能夠根據視窗寬度自動對 Layout 及頁面元素進行重新排列。比較常見的 Bootstrap 響應式部分的介紹：
以及柵格部分的詳細描述：
下面這張圖給出了 Bootstrap 的常見屏幕狀態下的幾個典型值：
關于網頁字體大小等問題，也可以參考上面比較經典的設計規范約定。常見的內容段落文字大小約定為 14px。我這邊在做的規范，關于排版的約定如下：
我們專注高端建站，小程序開發、軟件系統定制開發、BUG修復、物聯網開發、各類API接口對接開發等。十余年開發經驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！
