網(wǎng)頁設計尺寸規(guī)范及標準詳解
1. 屏幕分辨率寬度
我們只看 PC 端，根據(jù)現(xiàn)在屏幕大小的分布統(tǒng)計（下圖為百度流量研究院最新數(shù)據(jù)）
網(wǎng)站建設過程中絕大多數(shù)屏幕的分辨率已經(jīng)超過 1366*768，這是個屏幕逐漸變大的趨勢，幾年前我們還需要考慮在 1024* 768 這個非常普遍的分辨率下的顯示效果，現(xiàn)在基本上不需要單獨對其做處理了。
這個分辨率值只是上限參考，你不可能把頁面的實際顯示內(nèi)容區(qū)（或者叫安全區(qū)）搞到這個值，因為在 Windows 等部分瀏覽器上，滾動條等也要占據(jù)寬度，同時過分的貼邊在設計上是不被推薦的。
理解了這個我們就能清楚的知道一個基準值的參考范圍。
2. 柵格與響應式設計
這里需要理解一個概念，通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格，并在柵格間增加通用間距來處理絕大多數(shù)情況下的垂直排列問題，12或24的好處是能夠被2、3、4整除，更方便來處理2：1，1：2：1等常見間距。
計算方式（我這里常見的是處理企業(yè)級的設計頁面）
到這里基本上就知道為什么我們常見的值會是1180（1200減去兩邊柵格的留白）。這個值叫做典型設計參照，以往的設計平面稿是沒辦法動態(tài)適配各種寬度的，用典型值來作為設計稿基準尺寸能夠表達典型效果，并在頁面實現(xiàn)時更容易還原。
響應式布局是最近幾年比較流行的概念，在網(wǎng)頁渲染時，能夠根據(jù)視窗寬度自動對 Layout 及頁面元素進行重新排列。比較常見的 Bootstrap 響應式部分的介紹：
以及柵格部分的詳細描述：
下面這張圖給出了 Bootstrap 的常見屏幕狀態(tài)下的幾個典型值：
關于網(wǎng)頁字體大小等問題，也可以參考上面比較經(jīng)典的設計規(guī)范約定。常見的內(nèi)容段落文字大小約定為 14px。我這邊在做的規(guī)范，關于排版的約定如下：
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設計風格
-
確認交付使用
-
資料錄入優(yōu)化
-
程序設計開發(fā)
-
后續(xù)跟蹤服務
-
聯(lián)系電話
010-60259772
熱門標簽
- 網(wǎng)站建設
- 食品網(wǎng)站建設
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設
- 研究所網(wǎng)站建設
- 沈陽網(wǎng)站建設
- 廊坊網(wǎng)站建設
- 鄭州網(wǎng)站建設
- 婚紗攝影網(wǎng)站建設
- 手機端網(wǎng)站建設
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設
- 教育網(wǎng)站建設
- 品牌網(wǎng)站建設
- 政府網(wǎng)站建設
- 北京網(wǎng)站建設
- 網(wǎng)站設計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
企業(yè)建站—如何利用搜索引擎蜘蛛提升網(wǎng)站知名度
很多網(wǎng)站會發(fā)現(xiàn)自己的網(wǎng)站已經(jīng)做好優(yōu)化，為何不被收錄，就算收錄了，為什么...
2019-03-07 -
網(wǎng)站制作的難度會很高嗎？不可以忽視什么？
網(wǎng)站的使用對于很多企業(yè)來說，都是比較常見的事情，因為網(wǎng)絡的加入確實會給...
2022-11-01 -
PHP查詢MySQL大量數(shù)據(jù)的內(nèi)存占用分析
PHP查詢MySQL大量數(shù)據(jù)的內(nèi)存占用分析 這篇文章主要是從原理,...
2011-10-22 -
如何制作具有吸引力特別的網(wǎng)站
隨著寬帶越來越普及，上網(wǎng)的用戶越來越多，喜歡建站的站長也越來越多，畢竟...
2012-07-27 -
21世紀是一個信息時代
21世紀是一個信息時代,即Mail-list：在線收集訪客用戶的電子郵...
2012-09-20 -
企業(yè)網(wǎng)站建設要先了解網(wǎng)站需求
目前，市場上的許多企業(yè)已經(jīng)建立了自己的網(wǎng)站，但許多企業(yè)仍在為是否要建立...
2020-03-11
預約專業(yè)咨詢顧問溝通！
尚品專注高端網(wǎng)站建設，系統(tǒng)平臺開發(fā)，微信小程序及APP開發(fā)服務
免責聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前，請您仔細閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡，涉及到的部分文章和圖片版權屬于原作者，本站轉載僅供大家學習和交流，切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規(guī)，當本聲明與國家法律法規(guī)沖突時，以國家法律法規(guī)為準。
4、如果侵害了您的合法權益，請您及時與我們,我們會在第一時間刪除相關內(nèi)容!
聯(lián)系方式：010-60259772
電子郵件：394588593@qq.com
