MENU 服務(wù) 案例
網(wǎng)站建設(shè)-網(wǎng)站設(shè)計-北京網(wǎng)站建設(shè)-高端網(wǎng)站制作公司-尚品中國
我們通過擁抱變化創(chuàng)造
360°的品牌價值__
簡體
簡體中文 English

尚品與山東真諾智能設(shè)備有限公司簽署網(wǎng)站改版合作協(xié)議

類型：尚品動態(tài) 了解更多

網(wǎng)頁設(shè)計尺寸規(guī)范及標準詳解

來源：尚品中國| 類型：網(wǎng)站百科| 時間：2018-04-25

1. 屏幕分辨率寬度

我們只看 PC 端，根據(jù)現(xiàn)在屏幕大小的分布統(tǒng)計（下圖為百度流量研究院最新數(shù)據(jù)）

https://pic4.zhimg.com/80/v2-9d952eba7e5ea9857a1960e40902faa3_hd.jpg

網(wǎng)站建設(shè)過程中絕大多數(shù)屏幕的分辨率已經(jīng)超過 1366*768，這是個屏幕逐漸變大的趨勢，幾年前我們還需要考慮在 1024* 768 這個非常普遍的分辨率下的顯示效果，現(xiàn)在基本上不需要單獨對其做處理了。

這個分辨率值只是上限參考，你不可能把頁面的實際顯示內(nèi)容區(qū)（或者叫安全區(qū)）搞到這個值，因為在 Windows 等部分瀏覽器上，滾動條等也要占據(jù)寬度，同時過分的貼邊在設(shè)計上是不被推薦的。

理解了這個我們就能清楚的知道一個基準值的參考范圍。

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

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

https://pic2.zhimg.com/80/v2-6885900bd2d6397799416c7c31f92d5b_hd.jpg

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

https://pic2.zhimg.com/80/v2-4f641ed1a6c36e1d99d06783ead4c6f0_hd.jpg

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

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

圖標

以及柵格部分的詳細描述：

圖標

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

https://pic3.zhimg.com/80/v2-7a82f8fbc1ad374f96cd5fcb097779b3_hd.jpg

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

https://pic3.zhimg.com/80/v2-c7a0d61b2701f2a8310926271c3017cd_hd.jpg

來源聲明：本文章系尚品中國編輯原創(chuàng)或采編整理，如需轉(zhuǎn)載請注明來自尚品中國。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò)，如有侵權(quán)，請及時與本站聯(lián)系（010-60259772）。
TAG標簽：

如果您的網(wǎng)站可以增加轉(zhuǎn)化次數(shù)并提高客戶滿意度，該怎么辦？

預(yù)約專業(yè)咨詢顧問溝通！

*尚品專業(yè)顧問將盡快與您聯(lián)系

免責聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學習和交流，切勿用于任何商業(yè)活動。

2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī)，當本聲明與國家法律法規(guī)沖突時，以國家法律法規(guī)為準。

4、如果侵害了您的合法權(quán)益，請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com

現(xiàn)在就與專業(yè)咨詢顧問溝通！

  • 全國服務(wù)熱線

    400-700-4979

  • 北京服務(wù)熱線

    010-60259772

信息保護中請放心填寫
在線咨詢

免責聲明

非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細閱讀本聲明的所有條款。

1、本站部分內(nèi)容來源自網(wǎng)絡(luò)，涉及到的部分文章和圖片版權(quán)屬于原作者，本站轉(zhuǎn)載僅供大家學習和交流，切勿用于任何商業(yè)活動。

2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。

3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī)，當本聲明與國家法律法規(guī)沖突時，以國家法律法規(guī)為準。

4、如果侵害了您的合法權(quán)益，請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!

聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com