【摘要】在設計和實作PC端網頁時，我們通常選用1200px寬度作為安全區域的設計的标準。這主要取決于目前市面上的裝置的主流分辨率及栅格概念的出現。
根據百度流量研究院的最新資料顯示，2019年10月份我國網民通路PC網頁的主流裝置分辨率仍然為1920*1080，占總百分百為42.94%。很顯然，絕大部分的螢幕分辨率都已經超過了1366*768，在适配網頁時則不需要對1366寬度以下的尺寸做特殊處理。可見，1920px在目前是PC端網頁設計的标準。
需要注意的是，此圖中的分辨率數值僅作為上限的參考，在設計網頁時，不能夠将頁面的實際顯示内容的區域（也成為安全區）等同于此上限看度。考慮到在Windows等部分浏覽器上，滾動條本身也需要占據一定的寬度，是以，過分的貼邊或是接近于整螢幕寬度的設計是不被推薦的。
以1920px寬度作為設計标準，在整個頁面中，網頁的安全區域則為1200px。換句話說，我們隻要保證網頁的實際内容展示區域控制在1200px這個範圍内，就能保證整個頁面在不同尺寸的浏覽器通路時能夠完整的顯示出所有的内容。
為了布局友善，我們通常會将内容區域用栅格進行劃分，這裡我們一般會将内容區域劃分為12格或者24格。同時在栅格間增加通用固定的間距，可以很好的處理大部分情況下的垂直排列問題。
使用12格或24格的好處：能夠倍2、3、4整除；友善處理内容區域中2:1；1:2:1這一類常見的間距分布。
栅格的計算方式：
我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間距設定為“i”，此時我們把“a+i”定義為“A”，他們之間的關系如下：
W=(a*n)+(n-1)*i
由于a+i=A
可得(A*n)-i=W
我們定義了W為1180px，A為50px，i為20px，是以n=24
當我們設定設計栅格時，可以将總寬度設成1180（1200px安全區域減去兩邊栅格的留白），頁面分為24欄，每一欄的寬度為30px，間距為20px
使用栅格系統，可以有效提高網頁的規範性。在栅格系統下，頁面中的元素尺寸都是有同一基準線和規律的，而基于栅格系統進行設計，可以讓整個網站和各個頁面的布局保持一緻，增強頁面統一性，提升使用者體驗。
歡迎關注技術團隊的知乎賬号 我們憑團隊執行個體運作以下專欄， 必須幹貨！
網際網路創業專欄 (我們小夥伴的創業曆程)
與您一起聊技術 (APP、微信公衆号、小程式、H5 技術總結)
網際網路産品研發管理 (我們公司對産品結構的管理思路)
我們是不一樣的技術團隊: （我們認為:所有的企業行為，都解讀為交易行為，無論是摩拜單車、外賣平台、自動售貨機、招聘社群、家政服務，都用交易的語言來表達，我們專欄裡面有很多實際案例和開發過程和傳遞流程）
（類似于元素周期表，我們把交易拆解成元素級别，根據業務定制組裝，完全複原個性化需求，我們專欄裡面有很學術也很實際的介紹)
(每個項目設定: 導師成長基金、參與人員的獎勵，全員股權池，創業氛圍濃郁，我們專欄公開分享了我們的一些經驗)
(專治各種複雜的業務場景， 我們通過簡潔的元素和分層組合，來完成複雜場景的業務定制，我們在這一塊有非常多的案例，在網際網路創業專欄裡面有較長的描述)